Next.js 14 시작하기 #4 Custom 404 page

강의 10번

커스텀 404 페이지를 만드는 이유

• 브랜드 일관성 : 디자인과 브랜딩을 일치시켜 사용자 경험 일관성 유지
• 사용자 경험 향상 : 잘못된 URL 도달 시 도움말, 검색 기능, 홈페이지 링크 또는 사이트 맵과 같은 유용한 리소스 제공
• SEO 최적화 : 검색 엔진은 사용자 경험을 중요하게 생각함, 검색 엔진에게 사이트가 잘 관리되고 있음을 보여줌
• 분석과 로깅 : 커스텀 404 페이지에 추적 코드를 포함시켜, 사용자가 404 페이지에 도달하게 된 원인을 분석하고 누락된 페이지나 잘못된 링크를 발견, 개선 가능
• 사용자 유지 : 잘 설계된 404 페이지는 사용자가 떠나지 않게 유도할 수 있음
• 사용자 피드백 : 404 페이지에 피드백 양식이나 연락처 정보 등을 제공함으로써, 사용자로부터 직접 사이트 문제에 대한 피드백을 받을 수 있음
• 창의적 표현 : 404 페이지를 재밌거나 창의적인 요소로 활용하여 긍정적인 사용자 경험 기대

커스텀 404 페이지 만들기

사진과 같이 app 디렉토리 바로 밑에 not-found.js를 두면 애플리케이션 전반에 걸쳐 notFound() 함수 호출 시 not-found.js 페이지가 호출되고, 만약 이전에 했던 product의 review 관련하여 다른 에러 페이지를 보여주고 싶다면

이와 같이 reviewId가 1000이 넘어갈 경우 notFound()를 호출하여 에러 페이지인
에 접근할 수 있다. 여기서 page.js의 notFound() 함수는 next/navigation 패키지에서 제공되므로 import 해와야 함.

reviewId가 1001일 경우 뜨는 에러 페이지