Settings
- Next.js v15.1.2
서론
- 메인 페이지 : /
- 인증 페이지 : /auth
- 대시보드 페이지 : /dashboard
위처럼 각 페이지별로 나뉘어져 있고, 각 페이지마다 layout 이 꽤 많이 다른 상황.
만약 대시보드에서 없는 페이지를 접근하려고 할 때,
대시보드 layout 은 남겨둔 채로 main 부분만 404 용 컴포넌트가 렌더링 되도록 하고 싶어서
Not Found 페이지를 렌더링 하는 방식을 찾아보게 되었다.
1. Global Not Found
app/not-found.tsx
가장 일반적인 방식.
더 이상의 자세한 설명은 생략.
2. Directory-Specific Not Found
app/foo/not-found.tsx
특정 경로 내 Not Found 페이지를 설정하는 방식.
위처럼 컴포넌트를 만들어둔 경우,
/foo 의 하위 경로 전체에 적용되지만, 직접적인 접근에는 적용 불가.
해당 경로의 페이지에서 next/navigation 의 notFound() 를 호출해야만 해당 방식이 적용됨.
3. Dynamic catch-all route Not Found
app/foo/[...not-found]/page.tsx
특정 경로 내 Not Found 페이지를 설정하되, 직접적인 접근이나 notFound() 를 호출하지 않은 경우 적용되는 방식.
하지만! notFound() 를 호출하는 경우에는 해당 방식이 적용되지 않는 문제가 있어서,
호출 여부와 상관 없이 특정 경로 내의 페이지에 별도의 Not Found 를 렌더링 하려면 2번과 3번 방식 둘 다 적용해야한다...
Reference
