Next.js 13 - App Router

오랜만에 create-next-app으로 프로젝트를 생성했더니
폴더 구조가 달라졌길래 공식 문서를 확인해봤다.

---

the app Router

13버전에서부터 새로운 App Router라는게 도입되었다고 한다.

이전에 사용하던 pages도 여전히 동작하며,
혼용이 가능하다.

두 라우터 (pages와 app router)가 충돌할 경우,
app router가 더 우선적으로 적용된다고 한다.
경로가 충돌하면 빌드 과정에서 에러가 발생한다.

또한 서버 컴포넌트와 클라이언트 컴포넌트를 사용할 수 있다.

---

폴더와 파일의 역할

폴더는 라우트를 뜻한다.
src/app/page.tsx는 기존의 src/pages/index.tsx와 동일하다.
다른 예로, src/app/foo/bar/page.tsx는 src/pages/foo/bar.tsx와 동일하다.

파일은 해당 라우트에 적용될 UI 요소들이다.
특정 파일명에 대해서 특수한 동작들을 한다.

---

자신의 세그먼트와 자식에게 적용되는 것들

layout - 레이아웃 적용. children으로 page의 내용을 삽입한다.
loading - 로딩시에 적용되는 UI. (React suspense boundary에 잡힘)
not-found - 404시에 표시되는 UI. (React error boundary에 잡힘)
error - 에러시에 표시되는 UI. (React error boundary에 잡힘)

---

해당 세그먼트에만 적용되는 것들

page - 해당 경로에 접근할 수 있게 하는 UI

---

기타

global-error - 글로벌 에러 UI
route - 서버사이드 API 엔드포인트
template - ???
default - Parallel Routes에 사용되는 Fallback UI

---

마무리

언제 나왔나했더니 작년 10월에 나왔다.
너무 뒷북인거 같기도 하고.

그래도 이제 알면 그만이지~