React에서는 라우터 설정에서 아래와같이 * 을 붙이면, 나머지 url에 접근했을 떄 보여줄 페이지를 지정할 수 있었다. Next.js14에서는 어떻게 하는지 알아보자.
{
path: '*',
element: <NotFound />,
},
🧊 지정된 URL 이외의 페이지를 요청할 때 나타나는 페이지 만들기
Next.js14에서는 디텍토리가 곧 url이므로 React처럼 *을 붙여 따로 설정할 수 없다. 또한 프레임워크이기 때문에 Next.js14 제공해주는 방식으로 처리를 해야한다.
Next.js14에서 Not found 404 페이지를 만드는 방법은 정말 간단하다. app/not-found.tsx 파일을 만들면 없는 URL에 접근할 때 해당 페이지를 띄워준다.
예시)
위와 같이 src/app/not-found.tsx를 만들었다.
not-found.tsx에 홈으로 돌아갈 수 있는 링크를 만들었다.
이상한 url에 접속하면 해당 페이지가 뜬다. 덕분에 일관성 있는 브랜드를 표현할 수 있다.
🧊 임의로 not-found 페이지로 보내버리기
없는 url에 접근했을 때 not-found페이지를 보여주지만, 오류가 생기거나 원치않을 때 임의로 not-found페이지로 보내버리는 방법도 있다.
우선 not-found페이지는 app/ 폴더 뿐만 아니라, 다른 폴더안에서도 사용할 수 있다.
만약 Login 컴포넌트에서 NotFound() 함수를 사용하면, login/not-found.tsx 페이지를 보여준다.
만약 없다면 상위에 있는 폴더의 not-found.tsx를 찾아간다.
https://nextjs.org/docs/app/api-reference/file-conventions/not-found
https://nextjs.org/docs/app/api-reference/functions/not-found#notfound
✨ NotFound 함수는 글을 작성하기 위해 공부하면서 새롭게 알게 된 사실인데, 신기하다.