NextJS Router

• React Router와 NextJS의 Router
• React의 Router
• NextJS의 Router
• 기본 용어 정리
• Pages Router
• Index Routes
• Nested Routes
• Dynamic Routes
• Default
• Catch-all Segments
• Optional Catch-all Segments
• App Router
• 파일 규칙
• Colocation (콜로케이션)
• 고급 기능
• 비교
• 참고

그동안 React를 사용했을 때는 Router를 직접 구현해왔다.

react-router-dom을 설치하고 App.jsx에서 Routes와 Route 컴포넌트를 사용해 구현했다.

이렇게 직접 react-router-dom을 사용하면서 불편하다고 느낀점은 아래와 같다

• 개발자가 직접 구현하기에 누구는 App.jsx에서, 누구는 Router 폴더 안에서 구현해 구조가 다르다.
• 초기 설정을 위해 할 일이 많다. Router 자체를 구현하는 일도 필요하고 하나의 페이지를 만들기 위해서는 Router 파일을 직접 수정해야한다.

자유도가 높아서 규모에 따라 개발자 성향에 따라 구조를 바꿀 수 있는 점은 좋지만 반대로 그에 따른 단점도 존재하는 법이다.

NextJS에서는 기본적으로 Router가 구현된 상태에서 시작한다.

react-router-dom을 사용할 때 v5와 v6가 다르듯 NextJS에서도 구현되는 Router의 형태가 버전에 따라 다르다. 버전에 따른 Router에 대해 알아보고 프로젝트에 맞는 Router를 적용하기 위해 이 글을 작성했다.

NextJS는 App Router와 Pages Router로 나뉜다. Router에 따라 문서가 달라질만큼 중요한 부분이기에 꼭 알아야한다.

• 트리(Tree) : 계층 구조를 시각화하기 위한 규칙입니다. 예를 들어 상위 및 하위 구성 요소가 있는 구성 요소 트리, 폴더 구조 등이 있습니다.
• 하위 트리 : 새 루트(첫 번째)에서 시작하여 잎(마지막)에서 끝나는 트리의 일부입니다.
• 루트 : 루트 레이아웃과 같은 트리 또는 하위 트리의 첫 번째 노드입니다.
• 리프 : URL 경로의 마지막 세그먼트와 같이 자식이 없는 하위 트리의 노드입니다.

• URL 세그먼트 : 슬래시로 구분된 URL 경로의 일부입니다.
• URL 경로 : 도메인 뒤에 오는 URL의 일부(세그먼트로 구성)

페이지 개념으로 만들어진 파일 시스템 기반 라우터다.

pages 폴더에 파일이 추가되면 자동으로 라우팅이 가능하다.

js, jsx, ts, tsx 파일을 페이지로 만들며 폴더와 파일명을 기반으로 라우팅한다.

파일 경로 : pages/user/index.jsx 라우팅 경로 : /user

파일 경로 : pages/posts/first-post.jsx 라우팅 경로 : /posts/first-post

파일 경로 : /pages/posts/[id].jsx 라우팅 경로 : /posts/1, /posts/test, /posts/123 …

파일 경로 : /pages/posts/[…seg].jsx 라우팅 경로 : /pages/posts/a, /pages/posts/a/b, /pages/posts/a/b/c …

Catch-all과 Optional Catch-all의 차이는 segment가 없어도 가능한 점에서 다르다.

파일 경로 : /pages/posts/[[…seg]].jsx 라우팅 경로 : /pages/posts, /pages/posts/a, /pages/posts/a/b, /pages/posts/a/b/c…

React Server Components를 기반 라우터다.

app 폴더에 파일을 추가하는 형태로 라우팅이 가능하다.

Pages Router와 동일하지만 파일 명 규칙이 추가된다.

Pages Router와 동시 사용이 가능하며 App Router가 우선순위를 갖는다.

NextJS 13 버전부터 지원

App Router에서는 여러 고급 기능들을 제공한다.

이 글에서는 Pages Router와 App Router를 비교하기 위한 글이기 때문에 다루지않고 추후 아래에 링크를 추가하겠다.

• https://velog.io/@jjunyjjuny/nextjs-13.4.0부터-안정화된-App-Router.-Pages-Router와-비교#2-1-ssg-static-stie-generation
• 아직 이해가 부족하여 프로젝트가 끝나고 읽어보면 좋을 글