Next.js 병렬 라우트와 NextAuth 404 오류 해결 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Next.js와 병렬 라우트를 사용하는 개발자, NextAuth 인증 시스템을 통합한 애플리케이션 개발자

핵심 요약

• 병렬 라우트의 404 오류 원인: NextAuth의 [[...nextauth]] 라우트가 [[...nextauth]]로 변경되지 않은 경우 greedy한 동작으로 /privacy-policy와 같은 URL을 오해하여 오류 발생
• 해결책: [[...nextauth]]로 라우트 이름 변경하여 NextAuth 핸들러가 불필요한 URL을 무시하도록 설정
• 핵심 코드: [[...nextauth]]/route.ts로 디렉터리 이름 변경

섹션별 세부 요약

1. 문제 정의: 병렬 라우트의 404 오류

• 병렬 라우트(@left/@right) 구조에서 @right 슬롯의 /privacy-policy URL을 cold reload 시 404 오류 발생
• @left 슬롯의 NextAuth 라우트 (...nextauth)가 greedy한 동작으로 /privacy-policy URL을 인증 파라미터로 오해
• default.tsx 파일 추가로 해결되지 않음

2. 원인 분석: `NextAuth`의 `greedy` 라우트

• NextAuth 라우트 (...nextauth)는 모든 URL 경로를 무조건 매칭
• /privacy-policy URL이 /api/auth/ 베이스 경로와 일치하지 않음에도 불구하고 NextAuth 핸들러가 실행
• NextAuth 핸들러가 오류를 발생시키면 병렬 라우트 전체가 실패

3. 해결책: `optional catch-all` 라우트 적용

• [[...nextauth]] 라우트로 변경하여 NextAuth 핸들러가 /api/auth/ 베이스 경로와 그 확장 경로만 매칭
• privacy-policy와 같은 URL은 NextAuth 핸들러가 무시하고 default.tsx로 fallback
• [[...nextauth]] 라우트는 (...nextauth)와 달리 URL 경로가 일치하지 않을 경우 자동으로 무시

결론

• 병렬 라우트와 NextAuth를 사용하는 경우 [[...nextauth]] 라우트를 반드시 사용하여 greedy한 동작을 방지해야 함
• NextAuth 라우트 경로가 /api/auth/ 베이스 경로에 정확히 맞지 않는 URL을 처리하지 않도록 구성함으로써 404 오류를 방지할 수 있음