並列ルート

並列ルートを使用すると、同じレイアウト内で1つ以上のページを同時または条件付きでレンダリングできます。ソーシャルサイトのダッシュボードやフィードなど、アプリの高度に動的なセクションに便利です。

例えば、ダッシュボードを考えると、並列ルートを使用してteamとanalyticsページを同時にレンダリングできます：

スロット

並列ルートは、名前付きのスロットを使用して作成されます。スロットは@folder規則で定義されます。例えば、次のファイル構造は@analyticsと@teamの2つのスロットを定義しています：

スロットは共通の親レイアウトにプロップとして渡されます。上記の例では、app/layout.jsのコンポーネントが@analyticsと@teamスロットのプロップを受け取り、childrenプロップと並行してそれらをレンダリングできます：

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

ただし、スロットはルートセグメントではなく、URL構造に影響しません。例えば、/@analytics/viewsの場合、URLは/viewsになります。これは@analyticsがスロットであるためです。スロットは通常のPageコンポーネントと組み合わせて、ルートセグメントに関連付けられた最終的なページを形成します。このため、同じルートセグメントレベルで異なる静的および動的スロットを持つことはできません。1つのスロットが動的な場合、そのレベルのすべてのスロットは動的である必要があります。

補足：

• childrenプロップは、フォルダにマッピングする必要のない暗黙のスロットです。つまり、app/page.jsはapp/@children/page.jsと同等です。

アクティブ状態とナビゲーション

デフォルトでは、Next.jsは各スロットのアクティブな_状態_（またはサブページ）を追跡します。ただし、スロット内でレンダリングされるコンテンツは、ナビゲーションの種類によって異なります：

• ソフトナビゲーション：クライアントサイドのナビゲーション中、Next.jsは部分的なレンダリングを実行し、他のスロットのアクティブなサブページを維持しながら、スロット内のサブページを変更します。
• ハードナビゲーション：完全なページロード（ブラウザ更新）後、Next.jsは現在のURLと一致しないスロットのアクティブな状態を判断できません。代わりに、一致しないスロットに対してdefault.jsファイルをレンダリングするか、default.jsが存在しない場合は404をレンダリングします。

補足：

• 一致しないルートの404は、意図していないページで並列ルートを誤って描画しないようにするのに役立ちます。

default.js

初期ロードまたは完全なページリロード時に、一致しないスロットのフォールバックとしてレンダリングするdefault.jsファイルを定義できます。

次のフォルダ構造を考えてみましょう。@teamスロットには/settingsページがありますが、@analyticsにはありません。

/settingsに移動すると、@teamスロットは/settingsページをレンダリングし、@analyticsスロットの現在アクティブなページを維持します。

更新時に、Next.jsは@analyticsのdefault.jsをレンダリングします。default.jsが存在しない場合は、404がレンダリングされます。

さらに、childrenは暗黙のスロットであるため、Next.jsが親ページのアクティブな状態を復元できない場合のフォールバックとしてdefault.jsファイルを作成する必要があります。

useSelectedLayoutSegment(s)

useSelectedLayoutSegmentとuseSelectedLayoutSegmentsの両方がparallelRoutesKeyパラメーターを受け取り、スロット内のアクティブなルートセグメントを読み取ることができます。

'use client'
 
import { useSelectedLayoutSegment } from 'next/navigation'
 
export default function Layout({ auth }: { auth: React.ReactNode }) {
  const loginSegment = useSelectedLayoutSegment('auth')
  // ...
}

ユーザーがapp/@auth/login（またはURLバーの/login）に移動すると、loginSegmentは文字列"login"と等しくなります。

例

条件付きルート

並列ルートを使用して、ユーザーロールなどの特定の条件に基づいてルートを条件付きでレンダリングできます。例えば、/adminまたは/userロールに対して異なるダッシュボードページをレンダリングする：

import { checkUserRole } from '@/lib/auth'
 
export default function Layout({
  user,
  admin,
}: {
  user: React.ReactNode
  admin: React.ReactNode
}) {
  const role = checkUserRole()
  return <>{role === 'admin' ? admin : user}</>
}

タブグループ

スロット内にlayoutを追加して、ユーザーがスロットを独立してナビゲートできるようにします。これはタブの作成に便利です。

例えば、@analyticsスロットには/page-viewsと/visitorsの2つのサブページがあります。

@analytics内で、2つのページ間でタブを共有するためにlayoutファイルを作成します：

import Link from 'next/link'
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <nav>
        <Link href="/page-views">Page Views</Link>
        <Link href="/visitors">Visitors</Link>
      </nav>
      <div>{children}</div>
    </>
  )
}

モーダル

並列ルートはインターセプティングルートと組み合わせて、ディープリンクをサポートするモーダルを作成できます。これにより、モーダルを構築する際の一般的な課題を解決できます：

• モーダルコンテンツをURLを通じて共有可能にする。
• ページがリフレッシュされたときに、モーダルを閉じるのではなく、コンテキストを保持する。
• 前のルートに戻るのではなく、戻る操作でモーダルを閉じる。
• 前に進む際にモーダルを再度開く。

クライアントサイドナビゲーションを使用してレイアウトからログインモーダルを開くか、別の/loginページにアクセスできるUIパターンを考えてみましょう：

このパターンを実装するには、まずメインのログインページをレンダリングする/loginルートを作成します。

import { Login } from '@/app/ui/login'
 
export default function Page() {
  return <Login />
}

次に、@authスロット内にdefault.jsファイルを追加し、nullを返します。これにより、アクティブでない場合にモーダルがレンダリングされないことを保証します。

export default function Default() {
  return '...'
}

@authスロット内で、/(.)loginフォルダを更新することで/loginルートを遮断します。<Modal>コンポーネントとその子要素を/(.)login/page.tsxファイルにインポートします：

import { Modal } from '@/app/ui/modal'
import { Login } from '@/app/ui/login'
 
export default function Page() {
  return (
    <Modal>
      <Login />
    </Modal>
  )
}

補足:

• ルートを遮断するために使用される規則（例：(.))は、ファイルシステム構造によって異なります。ルート遮断の規則を参照してください。
• <Modal>の機能をモーダルコンテンツ（<Login>）から分離することで、モーダル内のフォームなどのコンテンツをサーバーコンポーネントにできます。詳細はクライアントとサーバーコンポーネントの入れ子を参照してください。

モーダルを開く

Next.jsルーターを活用して、モーダルを開閉できます。これにより、モーダルが開いているときやナビゲーションの前後で、URLが正しく更新されます。

モーダルを開くには、@authスロットを親レイアウトにプロップとして渡し、childrenプロップと一緒にレンダリングします。

import Link from 'next/link'
 
export default function Layout({
  auth,
  children,
}: {
  auth: React.ReactNode
  children: React.ReactNode
}) {
  return (
    <>
      <nav>
        <Link href="/login">モーダルを開く</Link>
      </nav>
      <div>{auth}</div>
      <div>{children}</div>
    </>
  )
}

ユーザーが<Link>をクリックすると、/loginページに移動するのではなく、モーダルが開きます。ただし、リフレッシュや最初の読み込み時に/loginに移動すると、ユーザーはメインのログインページに移動します。

モーダルを閉じる

router.back()を呼び出すか、Linkコンポーネントを使用してモーダルを閉じることができます。

'use client'
 
import { useRouter } from 'next/navigation'
 
export function Modal({ children }: { children: React.ReactNode }) {
  const router = useRouter()
 
  return (
    <>
      <button
        onClick={() => {
          router.back()
        }}
      >
        モーダルを閉じる
      </button>
      <div>{children}</div>
    </>
  )
}

@authスロットにもう表示されないページに移動するLinkコンポーネントを使用する場合、並列ルートがnullを返すコンポーネントに一致することを確認する必要があります。たとえば、ルートページに戻る際は、@auth/page.tsxコンポーネントを作成します：

import Link from 'next/link'
 
export function Modal({ children }: { children: React.ReactNode }) {
  return (
    <>
      <Link href="/">モーダルを閉じる</Link>
      <div>{children}</div>
    </>
  )
}

export default function Page() {
  return '...'
}

または、/foo、/foo/barなどの他のページに移動する場合は、キャッチオールスロットを使用できます：

export default function CatchAll() {
  return '...'
}

補足:

• アクティブ状態とナビゲーションで説明されている動作のため、@authスロットでキャッチオールルートを使用してモーダルを閉じます。スロットに一致しなくなったルートへのクライアントサイドナビゲーションは引き続き表示されるため、モーダルを閉じるためにnullを返すルートに一致させる必要があります。
• 他の例としては、ギャラリー内の写真モーダルと専用の/photo/[id]ページを開くこと、サイドモーダルでショッピングカートを開くことなどがあります。
• 遮断とパラレルルートを使用したモーダルの例を参照してください。

ローディングとエラーUI

パラレルルートは独立してストリーミングできるため、各ルートに独立したエラーとローディング状態を定義できます：

詳細については、ローディングUIとエラー処理のドキュメントを参照してください。