Next.js Parallel Routes와 Intercepting Routes 완벽 가이드 - 모달과 병렬 렌더링 마스터하기

Next.js Parallel Routes와 Intercepting Routes 완벽 가이드

Next.js App Router를 사용하다 보면 복잡한 UI 요구사항을 만나게 돼요. 같은 페이지에서 여러 섹션을 독립적으로 로딩하거나, 모달을 URL로 관리하고 싶을 때가 있죠. 바로 이럴 때 Parallel Routes와 Intercepting Routes가 진가를 발휘합니다.

Parallel Routes - 여러 페이지를 동시에 렌더링하기

Parallel Routes는 같은 레이아웃에서 여러 페이지를 동시에 렌더링할 수 있게 해줘요. @폴더명 형식으로 슬롯을 정의하고, 부모 레이아웃에서 props로 받아 사용합니다.

폴더 구조 예시:

app/
  dashboard/
    layout.tsx
    @analytics/
      page.tsx
    @team/
      page.tsx
    page.tsx

layout.tsx 구현:

export default function DashboardLayout({
  children,
  analytics,
  team,
}: {
  children: React.ReactNode
  analytics: React.ReactNode
  team: React.ReactNode
}) {
  return (
    <div>
      {children}
      <div className="grid grid-cols-2">
        {analytics}
        {team}
      </div>
    </div>
  )
}

각 슬롯은 독립적으로 로딩되고 에러를 처리할 수 있어요. loading.tsx와 error.tsx를 각 슬롯 폴더에 배치하면 되죠.

Intercepting Routes - URL은 바꾸고 UI는 가로채기

Intercepting Routes는 URL은 변경하되, 현재 레이아웃 내에서 다른 경로의 콘텐츠를 보여주는 기법이에요. 모달 구현에 완벽한 솔루션입니다.

라우트 가로채기 규칙:

• (.) - 같은 레벨
• (..) - 한 단계 위
• (..)(..) - 두 단계 위
• (...) - root부터

모달 폴더 구조:

app/
  @modal/
    (.)photo/
      [id]/
        page.tsx
  photo/
    [id]/
      page.tsx

이렇게 하면 피드에서 사진 클릭 시 모달로 표시되고, URL은 /photo/123으로 변경돼요. 새로고침하면 실제 페이지로 이동하죠.

실전 활용 - 모달과 병렬 렌더링 조합

루트 레이아웃:

export default function Layout({
  children,
  modal,
}: {
  children: React.ReactNode
  modal: React.ReactNode
}) {
  return (
    <>
      {children}
      {modal}
    </>
  )
}

가로채기 모달 페이지:

export default function PhotoModal({ params }: { params: { id: string } }) {
  const router = useRouter()

  return (
    <div className="modal" onClick={() => router.back()}>
      <img src={`/photos/${params.id}`} />
    </div>
  )
}

이 패턴으로 인스타그램 스타일의 사진 상세 보기, 트위터식 트윗 상세 모달 등을 구현할 수 있어요.

주의사항 - default.tsx 반드시 제공하기

Parallel Routes를 사용할 때 default.tsx를 각 슬롯에 제공하지 않으면, 매칭되지 않는 경로에서 404 에러가 발생해요. 특히 소프트 네비게이션과 하드 네비게이션에서 동작이 다르므로, 안전하게 default.tsx를 만들어두세요.

// @modal/default.tsx
export default function Default() {
  return null
}

결론

Parallel Routes는 대시보드처럼 복잡한 레이아웃을, Intercepting Routes는 모달처럼 URL 기반 오버레이를 우아하게 구현할 수 있게 해줘요. 두 패턴을 조합하면 사용자 경험과 SEO를 동시에 만족시키는 현대적인 웹 애플리케이션을 만들 수 있습니다. Next.js 14 이상에서 App Router를 사용한다면 꼭 활용해보세요!