인프런 커뮤니티 질문&답변
작성한 질문수
404.tsx
해결된 질문
작성
·
129
0
🚨긴급 공지
04.30 ~ 05.07 휴가 기간으로 인해 효빈님께서 답변을 대신 해 주실 예정입니다.
불편함을 드려 죄송합니다. 금방 복귀하겠습니다 🫡
🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요)
제목을 구체적으로 작성해 주세요
✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다.
⛔️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등
비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!
코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다.
깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요
직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲
답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요
비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!
제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲
강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요
더 빠른 답변이 가능합니다!
강의랑 동일하게 [[...id]].tsx랑 404.tsx 만들었는데 url을 http://localhost:3000/book/123-123123로 해도 왜 잘 표현 될까요?
http://localhost:3000/adfafdas 이런식으로 하면 404페이지로 잘 이동 됩니다.
답변 2
0
안녕하세요 이정환입니다.
강의에서 404 페이지로 리다이렉션 되는 주소는 아래 강의 캡쳐와 같이 225/225 처럼 여러개의 URL 파라미터가 슬래시(/)로 구분되어 있는 주소입니다. 질문주신 123-123123은 슬래시로 구분되어 있지 않기에 하나의 URL 파라미터만 존재하는것으로 간주됩니다.
0
안녕하세요, 인프런 AI 인턴입니다. hinpuo님.
Next.js에서 구성한 [[…id]].tsx와 404.tsx에 관한 질문을 주셨네요. 질문 내용으로 보아 라우팅이 예상과 다르게 작동하는 문제로 보입니다.
문제 분석 및 해결 방안
[…id] 경로 설정:
- [[…id]].tsx는 다이나믹 라우트로 사용될 때 모든 하위 경로를 포함할 수 있는 일종의 catch-all 라우터입니다. 그렇기 때문에
/book/123-123123와 같은 URL로 접속 시,[[...id]].tsx컴포넌트가 처리하게 됩니다.
- 이와 달리,
/adfafdas와 같은 경로가 404 페이지로 리다이렉트 되는 것은 해당 경로에 맞는 Next.js 페이지가 존재하지 않기 때문입니다.
- [[…id]].tsx는 다이나믹 라우트로 사용될 때 모든 하위 경로를 포함할 수 있는 일종의 catch-all 라우터입니다. 그렇기 때문에
404 페이지로 리디렉션 설정:
- 특정 경로를 404 페이지로 리디렉트하고자 하신다면,
getStaticPaths함수에서 paths 배열에 해당 경로를 제외한 경로만 담거나, 조건부로 해당하는 페이지를 핸들링하여notFound를 반환하도록 설정할 수 있습니다.
- 특정 경로를 404 페이지로 리디렉트하고자 하신다면,
에러 페이지 구현:
404.tsx파일에서는 일반적으로 catch되지 못한 모든 라우트에 대한 기본 에러 페이지로 사용됩니다. 각 경로에 대한 에러 페이지가 필요한 경우, 개별적으로 각 경로에 추가적인 에러 처리 로직을 넣어야 합니다.
Next.js의 URL 매칭 및 페이지 이동 로직에 따르면 위와 같은 특성이 있습니다. 만약 예상과 다른 행동이 계속된다면, 관련 프로젝트 설정을 다시 점검해 보시기 바랍니다.
유사한 질문 및 추가 자료:
- Next.js Dynamic Routes and 404 Handling
- Next.js에서 404 페이지 설정하기
위 내용이 도움이 되길 바라며, 문제가 지속될 경우 추가적인 정보를 주시면 더 나은 해결책을 찾아드리겠습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.