Intro

Parallel Routes을 사용하면 동일한 layout에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링할 수 있다. 소셜 사이트의 대시보드 및 피드와 같이 앱에서 매우 동적인 섹션의 경우 Parallel Routes을 사용하여 복잡한 라우팅 패턴을 구현할 수 있다.

TOC

• Convention
• Unmatched Routes
• useSelectedLayoutSegment(s)

Convention

Parallel Routes는 named slots을 사용하여 생성된다. 슬롯은 @folder 규칙으로 props과 동일한 수준의 레이아웃으로 전달된다.

예를 들어, 다음 파일 구조는 @analytics과 @team를 정의했다고 하면,

폴더 구조는 이제 app/layout.js의 컴포넌트가 @analytics와 @team slots 프로퍼티를 허용하고 하위 프로퍼티와 함께 병렬로 렌더링할 수 있수 있다.

export default function Layout(props: {
  children: React.ReactNode
  analytics: React.ReactNode
  team: React.ReactNode
}) {
  return (
    <>
      {props.children}
      {props.team}
      {props.analytics}
    </>
  )
}

Unmatched Routes

기본적으로 slots 내에서 렌더링되는 콘텐츠는 현재 URL과 일치한다.

일치하지 않는 slots의 경우 라우팅 기술과 폴더 구조에 따라 Next.js가 렌더링하는 콘텐츠가 달라진다.

default.js

Next.js가 현재 URL을 기반으로 slots의 활성 상태를 복구할 수 없을 때 대체 파일로 렌더링할 default.js 파일을 만들 수 있다.

다음 폴더 구조를 고려하세요. @team 슬롯에는 설정 디렉터리가 있지만 @analytics에는 설정 디렉터리가 없다.

root /에서 /settings으로 이동하는 경우 탐색 유형과 default.js 파일의 사용 가능 여부에 따라 렌더링되는 콘텐츠가 달라진다.

useSelectedLayoutSegment(s)

useSelectedLayoutSegment와 useSelectedLayoutSegments는 모두 해당 슬롯 내에서 활성 경로 세그먼트를 읽을 수 있는 parallelRoutesKey를 허용한다.

'use client'
 
import { useSelectedLayoutSegment } from 'next/navigation'
 
export default async function Layout(props: {
  //...
  authModal: React.ReactNode
}) {
  const loginSegments = useSelectedLayoutSegment('authModal')
  // ...
}

사용자가 URL 표시줄에서 @authModal/login 또는 /login으로 이동하면 로그인 세그먼트는 "login" 문자열과 동일하다.

Example - Modal

Parallel Routes을 사용하여 모달을 만들 수 있다.

@authModal 슬롯은 일치하는 경로(예: /login)로 이동하여 표시할 수 있는 <Modal> 컴포넌트를 렌더링한다.

export default async function Layout(props: {
  // ...
  authModal: React.ReactNode
}) {
  return (
    <>
      {/* ... */}
      {props.authModal}
    </>
  )
}

import { Modal } from 'components/modal'
 
export default function Login() {
  return (
    <Modal>
      <h1>Login</h1>
      {/* ... */}
    </Modal>
  )
}

모달이 활성화되어 있지 않을 때 모달의 콘텐츠가 렌더링하지 않으려면 null을 반환하는 default.js 파일을 만들면 된다.

export default function Default() {
  return null
}

Example - Conditional Routes

Parallel Routes를 사용하여 조건부 라우팅(Conditional Routes)을 구현할 수 있다. 예를 들어 인증 상태에 따라 @dashboard나 @login를 렌더링할 수 있다.

import { getUser } from '@/lib/auth'
 
export default function Layout({ params, dashboard, login }) {
  const isLoggedIn = getUser()
  return isLoggedIn ? dashboard : login
}

Reference

• Next.js 13 - Parallel Routes