반응형
Next.js를 실무에서 사용했는데 제품 특성 상 버전업이 쉽지 않아 계속 12버전만 사용해왔다. 13버전 부터 바뀌거나 추가된 내용이 많고, 15버전 까지 나와서 관련 내용을 공식 문서를 활용해 학습할까 한다.
굳이 14버전을 고른 이유는 가장 최신 버전은 안정화되지 않은 경우가 많고 13, 14, 15 중 13버전 부터 많은 변경사항이 생겼기 때문에 최신 버전에서 한 단계 낮은 14버전을 포트폴리오 프로젝트에 학습하며 적용해보기로 했다.
1. Routing
1-1. 구조
- URL구조는 Segment와 Path로 나뉜다.
1. Segment: /로 구분되는 부분.
2. Path: Segment의 집합.
- 폴더 구조는 아래와 같이 구분한다.
어려운 개념은 아니니 뭐
1-2. app router
- Next 13이후로는 Server Component를 기반으로 App router 제공.
1. 기존 pages router와 병행하여 사용할 수 있지만, App Router가 우선순위를 가짐.
2. 각 router에 동일한 URL이 존재하면, Build time에 에러 발생. - Folders는 Root segment부터 Leaf segment까지의 Path를 정의하는 데 사용하고, Files는 Next.js에서 정의한 파일 목록을 목적에 맞게 사용.
1. 폴더의 각 경로는 URL의 각 세그먼트를 나타낸다.
- Next.js는 특수한 File Set을 아래와 같이 제공.
| layout | 한 세그먼트와 자식 경로에 공유하는 Layout UI. |
| page | 경로의 고유한 UI이며, 접근 가능한도록 만들어 줌. |
| loading | 한 세그먼트와 자식 경로에 공유하는 Loading UI. |
| not-found | 한 세그먼트와 자식 경로에 공유하는 Not Found UI. |
| error | 한 세그먼트와 자식 경로에 공유하는 Error UI. |
| global-error | 전역 Error UI. |
| route | Server-side API Endpoint. |
| template | 스페셜하게 다시 그려지는 Layout UI(?) |
| default | 병렬 경로의 Fallback UI.(?) |
ErrorBoundary는 자식 경로에서 발생한 에러를 캐치하여 Fallback UI(임시 대체화면)을 보여주는 것.
Suspense라는 React의 신기술을 사용하면 컴포넌트의 랜더링을 어떤 작업이 끝날 때까지 잠시 중단시키고 다른 컴포넌트를 먼저 랜더링 시키는 것.
- 위의 각 파일들은 특정 계층 구조로 렌더링 된다
<Layout>
<Template>
<ErrorBoundary fallback={<Error />}> <<=== 이게 아마 error
<Suspense fallback={<Loading />}> <<=== 이게 아마 loading
<ErrorBoundary fallback={<NotFound />}> <<=== 이게 아마 not-found
<Page /> <<=== 중첩된 세그먼트의 경우 동일한 구조로 해당 부분에 삽입.
</ErrorBoundary>
</Suspense>
</ErrorBoundary>
</Template>
</Layout>
- page 또는 route 파일을 제외하고 별도의 파일을 배치할 수 있지만, 이는 URL Path를 통해 접근할 수 없다.
2가지의 다른 라우팅 패턴도 존재.
1. 병렬 라우팅: 동일한 화면에서 서로 다른 두 접근 가능한 UI를 보여주는 것. (대시보드)
2. 인터셉트 라우팅: 현재 UI를 유지하면서, 또 다른 페이지를 표시해주는 것. (모달)
2. Pages and Layouts
- UI는 page, layout, template 3가지 파일로 구현할 수 있다.
- page와 route는 export default로 내보내야 한다.
- page는 Server Component가 기본이지만, Client Component로 제공할 수 있다.
- layout은 하위 경로에 공유되며 re-rendering 되지 않고, 상태를 보존하는 특징이 있다.
- root layout은 필수이고, 모든 페이지에 공통으로 적용되며 <html>, <body> 태그가 필수이며 오직 root layout만 해당 태그를 가질 수 있다.
- 부모-자식 layout간 데이터 전달은 불가능하지만, 각 layout에서 발생하는 중복 요청은 자동으로 1번만 요청하여 성능 문제가 없다.
- template은 layout과 비슷하게 레이아웃을 구성하지만, 해당 경로에서 새로운 인스턴스를 생성하고 상태가 초기화되는 특징이 있다.
처음 뵙겠습니다.
Next.js 사용하면서 처음 본 개념이거나, 이해하기 어려운 부분(?)은 붉은색 볼드처리 해봤다.
- segment: 이 친구... 부를 일이 별로 없어서 대충 얼버무려서 넘어갔었는데, 세그먼트라는 친구였구나.
- Server Component, Client Component: 뒤에 나오는 내용인데, 미리 한 번 봤는데 12버전과 다르게 컴포넌트가 기본적으로 서버에서 동작하도록 설계된 거 같다. 자세한 내용은 이후에 확인해 봐야지.
- template: layout과 동일하게 레이아웃을 구성하는 컴포넌트인데.... 무슨 차이가 있나 좀 애매했었다. 이론은 이해했지만, 왜 필요하지 느낌? 실제로 적용해보면 이해될 거 같다.
Preference
Building Your Application: Routing | Next.js
Learn the fundamentals of routing for front-end applications.
nextjs.org