Portfolio

Next.js의 404 페이지를 제작하려고 한다. 어떻게 만들어야 할까?

일단 기본적으로 넥스트는 동적 라우팅을 디렉토리 구조로 판단하여 정적으로 구성해낸다.

따라서, 404 페이지는 가장 루트 디렉토리에서 404라고 입력을 하면, Next.js에서 빌드할 때 해당 페이지가 404 status가 나올 때의 Page라고 인식하고, 빌드한다.

만약 서버 자체에 오류가 있다면 사용자는 어떨까?

계속해서 자신의 잘못이라고 판단하여 서버 접속을 시도하려 할 것이다. 혹은, 아예 인터넷 문제를 해결하고자 브라우저에 대한 설정을 변경할 수도 있다. 단지 서버 측에서의 문제임에도 말이다.

따라서 예기치 않은 500 오류는 서버 요청의 복잡성을 증대시킨다.

Next.js에서는 UX를 증진시키고자 500 Page를 제공한다.

이는 클라이언트단에서 서버의 오류가 발생하면, 500 status가 서버에서 반환될 것이다.

만약 두 에러 모두 처리하고 싶다면 어떻게 해야 할까? 이 역시 간단하게 _error.tsx에서 처리해주면, Next.js에서 해당하지 않는 라우트에 공통으로 페이지를 뿌려낸다.

Custom Error Page in Next.js