exclude a page from next.js root layout

jew·2024년 6월 3일

rootlayout 만지면서 경로 수정하고 있었는데, 황당하게 이런 레이아웃이 나왔다

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

--

이후 이런 방식으로 해결했다.

기존의 rootlayout을 그대로 사용할 페이지들은

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

처럼 (with-layout) 폴더 안으로 넣었다.

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

  • app/(without-layout)/[...not_found]/page.tsx
  • app/(without-layout)/layout.tsx
  • 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.tsx가 적용된다.

요렇게 다시 돌아왔다!

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

profile
문제 있으면 의식의 흐름대로 작성하는 블.log

0개의 댓글