next.js next 넥스트
-
[Bug Fix] Next.js 14 App Router 버전, 동적 경로에서 데이터가 없는 경우 404 페이지로 redirect 시키기Front-end 개발 2024. 11. 23. 21:58
Problem기본적으로 존재하지 않는 경로는 자동으로 app 폴더 밑에 있는 not-found.tsx 파일인 404 페이지로 redirect 된다.그런데 Next.js 14 App Router 버전에서 동적 경로를 사용하는 Catch All Segment를 사용하는 경우 하위의 모든 경로를 포함하기 때문에 라우팅에서 편리 하지만 데이터가 존재하지 않는 페이지도 보여지게 된다. SolutionnotFound 활용하기기존적인 해법으로 직접 코드 상에서 특정 조건에서 notFound 메서드를 호출하면 된다.내 경우에는 데이터 페칭 결과값이 없을 때, 서버 액션에서 에러를 반환하는 것이 아니라 undefined를 반환하도록 하고, 데이터 페칭의 결과가 존재하지 않을 경우 notFound 를 호출하는 코드로 작성..