[Next.js] SSR 이해하기

Next.js 과제를 하다가 서버의 개념도 헷갈리고, 각 기능을 어떤 상황에서 왜 사용해야하는지 이해가 부족하다는 생각이 들었다.과제 안내사항을 따라 필수 요소들을 구현하긴 했지만, 여전히 스스로 생각해서 구현하기는 어려울 것 같아 도전과제는 우선 미뤄두고 넥스트에서 이해가 안되는 부분을 공부해보기로했다.. 🥹  SSR이란?✅ 개념서버에서 웹페이지를 미리 만들어서 사용자에게 보내는 방식, CSR보다 향상된 SEO와 첫 화면 로딩 속도를 위해 사용된다. ✅ 렌더링 과정 1) 사용자가 서비스에 접속2) 브라우저가 해당 페이지를 보내달라고 접속한 도메인으로 HTTP GET request- 이 때 도메인이 바로 페이지를 렌더링해 보내줄 서버의 주소- 서버는 클라이언트에서 request를 받아 데이터 페치 혹은..

• format_list_bulleted Next.js
• · 2024. 10. 7.
• textsms

[Next.js] 개인과제 트러블슈팅 (동적 라우팅 경로, 클라이언트 컴포넌트 환경변수, Module not found)

첫 next.js 프로젝트를 진행하며 해결한 오류들을 모아보았다 동적라우팅된 페이지 경로에 의문의 데이터 등장문제아이템 상세 페이지의 경로에서 해당 아이템의 id를 받아와 전체 데이터에서 아이템에 해당하는 정보를 받아오려는데, 계속 undefined가 떴다. 정확한 id를 받아오고있는지 확인해보니 1004 와같은 아이디 외에 의문의 데이터가 있었다. 아이템마다 달라지는 값인지 확인해보았더니, 모든 아이템의 경로에 동일하게 %7D가 추가되고있었다. 해결모두 동일하게 특정 값이 추가되고 있다면 다른 것보다 이동하는 경로를 지정해주는 곳에서 뭔가 실수가 있을 것이라 추측이 됐다. 아이템, 챔피언 썸네일과 이름을 보여주는 카드에서 클릭시 이동할 경로를 지정해주고 있었는데(Link의 href) 그곳을 확인해보니 ..

• format_list_bulleted Next.js
• · 2024. 10. 7.
• textsms

[Next.js/Tanstack-Query] Next에서 prefetch하기

Next.js에서 prefetch의 필요성Next.js는 동적 데이터도 빌드 시점에 미리 fetch해서 로딩 속도를 향상시킬 수 있다. (SSG)하지만 빌드 시점의 상태가 아닌 최신 상태를 받아야하면서도, 로딩 속도를 향상시키고 싶다면 prefetch 를 활용할 수 있다! json-server 옵션으로 user 목록을 json-server에서 로드해오는 fetch에 2초 딜레이를 준 상태다메인 페이지에서 사용자 목록을 prefetch 해두었기 때문에 other 페이지에서 사용자 목록을 로딩 없이 바로 확인할 수 있다!예제Query Provider 만들기하위 컴포넌트들이 queryClient에 접근할 수 있도록 Query Provider를 생성한다// src/components/providers/TQPro..

• format_list_bulleted Next.js
• · 2024. 10. 1.
• textsms

[Next.js] Auth와 Middleware

Middlewarenext.js 서버로 요청이 전달되기 전에 코드를 실행할 수 있는 기능을 제공들어오는 요청을 기반으로 응답을 재작성, 리다이렉트, 요청 또는 응답 헤더 수정, 혹은 직접 응답할 수 있다 생성src 폴더에 middleware.ts 파일 생성import { NextResponse } from 'next/server';import type { NextRequest } from 'next/server';// This function can be marked `async` if using `await` insideexport function middleware(request: NextRequest) { console.log(request);}export const config = { matc..

• format_list_bulleted Next.js
• · 2024. 9. 30.
• textsms

React-Hook-Form와 Zod

설치 및 임포트yarn add react-hook-form'use client'import { useForm } from 'react-hook-form';const { register, handleSubmit, formState } = useForm(); handleSubmitform의 onSubmit에 실행하고 싶은 동작을 handleSubmit의 인자로 넣어 준다const onSubmit = (value: FieldValues) => { // form 제출시 실행할 동작 console.log(value);};return ( )  registerinput 태그에 사용input 태그의 용도를 의미하는 id, 옵션을 넣어준다옵션 예시는 required (필수인지), pattern (정규식 검증이 ..

• format_list_bulleted React
• · 2024. 9. 30.
• textsms

[Next.js] Parallel Routes & Intercepting Routes

Parallel RoutesURL 세그먼트를 담당하는 폴더에 @를 붙여 여러 페이지 경로를 렌더링할 수 있게하는 기능아래 사진처럼 한 페이지에 두가지 페이지 요소를 띄우는 등의 작업을 할 수 있게 함대시보드나 소셜 사이트의 피드, 상품 상세 페이지 모달 띄우기 같은 보여줘야하는 정보량이 많은 동적인 섹션에 유용하게 사용할 수 있음 모달 실습1) (root)/@modal/page.tsx 생성const ModalPage = () => { return ( modal 영역 );};export default ModalPage; 2) layout의 props에 modal: React.ReactNode를 추가export default function Layo..

• format_list_bulleted Next.js
• · 2024. 9. 29.
• textsms