Separate Next.js Root Layout from 404 Page Layout

 

➡️ 문제 상황 :

현재 하단의 이미지에 보이는 Sidebar는 root의 layout 파일에 레이아웃 기본값으로 설정해두었다.

그러던 와중 경로를 이동하고 있었는데, 오타로 인해 잘못된 페이지에 들어가자 이런 화면이 나왔다. 404 화면은 생각도 못하고 있었다 !!

 

 

root의 layout이 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

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

 

 

그리고 다른 layout을 사용할 페이지같은 경우는

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

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

 

(+ [...not_found] => Next.js에서 []은 동적 라우팅을 의미한다.

https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes)

 

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