Next.js
1.Routing Fundamentals[Next.js]
Tree: 계층 구조를 시각화 한 것Subtree: 전체 트리의 일부분Root: 트리 또는 서브트리의 제일 처음 노드Leaf: 더이상 자식 노드를 가지지 않는 노드URL Segment : 슬래시로 구분되는 url 경로URL Path: 도메인을 제외한 url 부분새로 도
2.Defining Routes[Next.js]
앱 디렉터리 내부에서 폴더는 라우팅 경로를 설정하기 위해 사용됨각각의 폴더는 URL segment에 대응되는 route segment가 되며, 폴더를 중첩해 nested route를 생성할수도 있음폴더 내부에 page.js 파일을 만드는 것으로 세그먼트를 공개할 수 있
3.Pages and Layouts[Next.js]
page.js 파일을 생성하는 것으로 해당 라우트 경로에 공개적으로 접근을 할 수 있게 해줌루트 디렉토리에 접근을 위해서는 app 폴더 바로 아래에 page.js 작성여러 페이지에서 UI를 공유할경우 layout을 사용레이아웃은 상태를 보존하면서 라우팅 시에도 보존됨레
4.Linking and Navigating[Next.js]
a태그를 대체하며, prefetching과 client side navigation을 지원함일반적으로 Next.js에서 가장 많이 사용되는 네비게이션 방법ex)클라이언트 컴포넌트 내부에서 페이지를 라우팅 할때는 useRouter 훅을 사용Link 사용이 가능할 경우에는
5.Loading UI && Error Handling[Next.js]
instant loading state는 라우팅시 로딩 상태를 표시하는 ui를 의미함스피너, skeleton 등을 사용해 앱이 데이터를 준비중이라는 것을 알려줄 수 있음loading.js 파일은 layout.js 파일에 중첩되며, Suspense내부에 둘러쌓인 page
6.Route Handlers[Next.js]
Rest api 사용을 위한 메서드 작성을 위해 route handlers를 작성할 수 있음app 폴더 내부에 route.js(ts) 파일을 작성app 디렉토리에 중첩된 경로에도 사용 가능하지만, page.js가 있는 폴더에 route.js를 동시 작성은 불가능함에 주
7.Parallel Routes && Intercepting Routes[Next.js]
Parallel Routes 경로가 동일한 2개 이상의 페이지를 별개로 라우팅할 수 있음 폴더로 slot이라는 것을 만들어 생성할 수 있으며 이는 @folder 식의 작명을 통해 가능함 ex) slot은 url 구조에 영향을 주지 않음 만약 뒤로가기, 앞으로가기를 할
8.Rendering[Next.js]
사이트에 대한 렌더링은 기본적으로 클라이언트, 서버 양측에서 진행 가능함React 18 이전에는 기본적으로 클라이언트에서 렌더링을 진행함Next.js에서는 HTML을 생성하고 React가 해석할 수 있도록 클라이언트에 보내 서버에서 렌더링을 할 수 있도록 해줬지만, 이
9.Server and Client Components[Next.js]
기본적으로 app 디렉터리에 있는 컴포넌트들은 React Server Components(RSC)로 취급됨서버 구성 요소를 사용하게 되면 클라이언트가 받는 종속성 파일들아 줄어 성능 향상에 도움이 됨클라이언트에서는 요소를 캐시 가능하고, 크기를 예측할 수 있으며, 각
10.Static and Dynamic Rendering[Next.js]
데이터가 캐싱되고 동적 함수가 존재하지 않으면 해당 컴포넌트는 정적인 렌더링을 서버에서 진행하게 됨정적 렌더링 시에는 모든 렌더링 작업이 미리 완료되고 사용자에게 가까운 CDN에서 데이터를 가져오게 할 수 있기 떄문에 성능 향상에 도움을 줌Next.js에서 데이터를 f
11.Edge and Node.js Runtimes[Next.js]
Next.js에서 런타임은 서버 실행 중 사용 가능함 라이브러리, API, 함수의 기능 등을 의미함Next.js에서는 Node.js 런타임, Edge 런타임을 사용 가능함기본값은 Node.js 런타임이 사용됨페이지별로 runtime 변수를 export해서 런타임 방식을
12.Fetching[Next.js]
서버 구성 요소에서 바닐라 web API를 사용해 데이터를 페칭할 수 있음리액트에서는 fetch를 시도할 때 중복되는 데이터를 캐싱해두고, Next.js에서는 데이터를 캐싱함과 동시에 revalidate해줌클라이언트 단에서 데이터를 가져올 수 있지만, 일반적으로 서버에
13.Data Fetching[Next.js]
React RFC를 사용해 서버 컴포넌트에서 데이터를 가져올 수 있음서버에서 데이터를 가져올 때 cookies(), headers()를 통해 추가적인 정보를 읽어낼 수 있음정적인 데이터를 패칭할 경우 기본적으로 패칭된 데이터는 캐싱됨일정한 시간간격으로 데이터 재검증이
14.Data Caching & Revalidating & Mutating[Next.js]
데이터 캐싱은 세그먼트 수준, 또는 요청 수준에서 진행됨세그먼트 단계에서의 캐싱은 경료 세그먼트에 사용된 데이터를 캐시하고 재검증하게 됨요청단계에서의 캐싱은 리액트에서 함수값을 기억했다 다시 똑같은 함수의 요청이 들어올 때 캐시된 값을 반환하게 됨GraphQL 사용시
15.Styling[Next.js]
리액트에서와 동일하게 module.css파일을 사용해 각 파일별로 css를 사용할 수 있음css파일을 작성하거나 이미 제작된 css 파일을 가져올 수 있음모든 디렉터리에 전역적으로 사용되는 css파일은 app/global.css파일에 지정\_app.js에서만 impor
16.Next.js 14 [Next.js]
업데이트 톺아보기