Next.js 15 Parallel Routes作例｜2スロット同時描画プロンプト

Next.js 15で安定版となったParallel Routesは、1つのレイアウト内で複数のページを同時にレンダリングできます。各ルートは独立しており、独自のローディングスケルトン、エラー境界、異なるデータ取得戦略を持てます。ダッシュボードや管理画面、独立したセクションを組み合わせるUIに最適です。

クイックセットアップ

appディレクトリ内に @ プレフィックス付きのフォルダを作成します（例：app/@analytics/page.tsx、app/@team/page.tsx）。次に app/layout.tsx でこれらのスロットをpropsとして受け取るよう更新します。

ライブデモ

上のデモでは、@analytics が遅いデータベースクエリをシミュレートしてローディングアニメーションを表示し、@team は即座にレンダリングされます。両者は同じ親レイアウトを共有しますが、完全に独立しています。

メリット

• 体感速度の向上 — 各ルートが独立してストリーミングされます。
• エラーの分離 — 1つのルートでエラーが発生してもページ全体が壊れません。
• 型安全 — TypeScriptが各スロットをチェックします。