Next.js parallel routes에서 다른 슬롯만 404가 뜬 이유

문제 발생

대시보드 레이아웃에 @analytics, @team 두 개의 parallel route 슬롯을 만들었는데, /dashboard/settings처럼 두 슬롯 어느 쪽과도 직접 매치되지 않는 경로로 이동하면 페이지 전체가 404로 떨어졌습니다.

app/
  dashboard/
    layout.tsx        # {children}, {analytics}, {team} 모두 렌더링
    @analytics/
      page.tsx
    @team/
      page.tsx
    settings/
      page.tsx

원인 분석

Parallel routes(@폴더명)는 같은 레이아웃 안에서 여러 페이지를 동시에 독립적으로 렌더링하는 기능입니다. 문제는 각 슬롯이 현재 URL에 대응하는 자신만의 상태를 가져야 한다는 점입니다 — /dashboard/settings로 이동하면 @analytics와 @team 슬롯은 이 URL과 매치되는 자기 페이지가 없습니다.

Next.js는 이런 "현재 URL과 매치되지 않는 슬롯"에 대해 default.tsx(또는 default.js)라는 파일을 찾아 렌더링합니다. 이 파일이 없으면, Next.js는 그 슬롯을 렌더링할 방법이 없다고 판단해 전체 페이지가 404로 처리됩니다 — 슬롯 하나 때문에 페이지 전체가 죽는 것처럼 보이는 이유입니다.

해결 방안

1. 모든 parallel route 슬롯에 default.tsx를 만듭니다. 보통 아무것도 렌더링하지 않거나(null), 혹은 부모 슬롯의 첫 페이지로 되돌아가는 형태로 만듭니다.

// app/dashboard/@analytics/default.tsx
export default function Default() {
  return null; // 이 슬롯은 아무것도 안 보여줌
}

2. 브라우저의 소프트 내비게이션(클라이언트 사이드 이동)에서는 Next.js가 마지막으로 렌더링됐던 슬롯 상태를 유지해 default.tsx 없이도 잠깐은 동작하는 것처럼 보일 수 있지만, 직접 URL 진입이나 새로고침(하드 내비게이션)에서는 default.tsx가 반드시 필요합니다 — 개발 중 소프트 내비게이션으로만 테스트하다가 이 파일 누락을 놓치는 경우가 흔합니다.
3. 슬롯마다 어떤 URL 패턴에서 어떻게 보여야 하는지(계속 유지, 숨김, 다른 기본 콘텐츠)를 먼저 설계하고 나서 default.tsx의 내용을 결정합니다 — 무조건 null이 아니라 슬롯의 의도에 맞는 기본 상태를 보여줘야 하는 경우도 있습니다.
4. 새 parallel route 슬롯을 추가할 때마다 체크리스트처럼 default.tsx를 함께 만드는 습관을 들이는 것이 이 문제를 예방하는 가장 확실한 방법입니다.

공식 문서

• Next.js Docs: Parallel Routes — default.js