exclude a page from next.js root layout

 

root의 layout.ts 만지면서 경로를 수정하고 있었는데, 황당하게 이런 레이아웃이 나왔다.

에러페이지를 머리에서 잊고 있다가 이렇게 뜨니까 생각남..

 

layout.js가 루트에만 있고 분기별 처리가 되어있지 않아서 전역적으로 적용되기 때문에 생긴 문제였다.

그리고 이 레이아웃 파일이 app/(foldername)/page.tsx처럼 ()로 라우터 페이지가 숨겨져 있어도 하위 폴더 안의 페이지에 적용되기 때문에 발생했다.

 

https://nextjs.org/docs/app/building-your-application/routing/route-groups

공식 문서에서 이 부분을 보고 다음과 같은 방식으로 해결했다.

 

먼저 기존의 root layout 형식을 그대로 사용할 페이지와 아닌 페이지를 나누고,

• app/(with-layout)/foldername/page.tsx
• app/(with-layout)/layout.ts

기존의 root layout 형식을 그대로 사용할 페이지들은 위에서 보이는 (with-layout) 폴더 안으로 넣었다.

 

그리고 다른 layout 형식을 사용할 페이지는

• app/(without-layout)/[...not_found]/page.tsx
• app/(without-layout)/layout.ts
• app/(without-layout)/not-found.tsx

처럼 (without-layout) 폴더로 넣고 구분지으면 된다.

 

 

next.js에서 [...]은 동적 라우팅을 의미한다.

• All requests to /api/auth/* (signIn, callback, signOut, etc.) will automatically be handled by NextAuth.js.

 

 

이렇게 묶어서 넣어주면 () 안의 페이지에는 () 안의 layout.ts가 적용된다.

 

 

Routing: Route Groups | Next.js