Next.js | 14버전 앱 라우터 - Route Groups

샘샘·2024년 8월 1일

Next.js 14

목록 보기
4/5

페이지 라우터에서는 페이지를 구성할 때 pages 폴더 하위에 원하는 url로 폴더를 만들어주고 index.tsx파일을 넣어주면 폴더명으로 url이 보여졌다

그런데 앱라우터에서는 app 루트에 원하는 url 이름의 폴더명을 만들어주고 page.tsx라는 파일명을 사용해야 한다

Route Groups

폴더이름을 괄호로 만들어 URL 경로에 포함되지 않도록 하는 것
Next.js 공식문서

개발자가 구분짓고 싶은 기준에 맞게 (폴더명)을 만들어서 해당 폴더 안에 원하는 파일 또는 폴더(페이지)를 넣어주면 된다

라우트 그룹 내부의 레이아웃은 해당 그룹내의 페이지에만 적용된다

최상위의 공통으로 쓰이는 layout.tsx 파일 없이 여러 개의 루트 레이아웃을 사용하는 경우에는 홈 page.js 파일은 경로 그룹 중 하나에 포함되어야 한다 예: app/(marketing)/page.js

0개의 댓글