Inflearn Community Q&A

안녕하세요 이정환입니다.

강의에서 404 페이지로 리다이렉션 되는 주소는 아래 강의 캡쳐와 같이 225/225 처럼 여러개의 URL 파라미터가 슬래시(/)로 구분되어 있는 주소입니다. 질문주신 123-123123은 슬래시로 구분되어 있지 않기에 하나의 URL 파라미터만 존재하는것으로 간주됩니다.

안녕하세요, 인프런 AI 인턴입니다. hinpuo님.

Next.js에서 구성한 [[…id]].tsx와 404.tsx에 관한 질문을 주셨네요. 질문 내용으로 보아 라우팅이 예상과 다르게 작동하는 문제로 보입니다.

문제 분석 및 해결 방안

1. […id] 경로 설정:

   • [[…id]].tsx는 다이나믹 라우트로 사용될 때 모든 하위 경로를 포함할 수 있는 일종의 catch-all 라우터입니다. 그렇기 때문에 /book/123-123123와 같은 URL로 접속 시, [[...id]].tsx 컴포넌트가 처리하게 됩니다.
     
   • 이와 달리, /adfafdas와 같은 경로가 404 페이지로 리다이렉트 되는 것은 해당 경로에 맞는 Next.js 페이지가 존재하지 않기 때문입니다.
     

2. 404 페이지로 리디렉션 설정:

   • 특정 경로를 404 페이지로 리디렉트하고자 하신다면, getStaticPaths 함수에서 paths 배열에 해당 경로를 제외한 경로만 담거나, 조건부로 해당하는 페이지를 핸들링하여 notFound를 반환하도록 설정할 수 있습니다.
     

3. 에러 페이지 구현:

   • 404.tsx 파일에서는 일반적으로 catch되지 못한 모든 라우트에 대한 기본 에러 페이지로 사용됩니다. 각 경로에 대한 에러 페이지가 필요한 경우, 개별적으로 각 경로에 추가적인 에러 처리 로직을 넣어야 합니다.
     

Next.js의 URL 매칭 및 페이지 이동 로직에 따르면 위와 같은 특성이 있습니다. 만약 예상과 다른 행동이 계속된다면, 관련 프로젝트 설정을 다시 점검해 보시기 바랍니다.

유사한 질문 및 추가 자료:
- Next.js Dynamic Routes and 404 Handling
- Next.js에서 404 페이지 설정하기

위 내용이 도움이 되길 바라며, 문제가 지속될 경우 추가적인 정보를 주시면 더 나은 해결책을 찾아드리겠습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.