18,724 測定値

Next.Js 13 並行ルート: 総合ガイド

に Leandro Nuñez8m2023/08/17

長すぎる; 読むには

この記事は、Next.js 13.3 で導入された強力な機能である並列ルートを理解するために細心の注意を払って作成されています。

featured image - Next.Js 13 並行ルート: 総合ガイド

1. はじめに

こんにちは！

Next.js の並列ルートに関するこの包括的なガイドへようこそ。

デジタル環境が進化するにつれて、Web 開発の複雑さも進化しています。最新の Web アプリケーションには、ユーザーエクスペリエンスを向上させ、複雑な設計構造に対応するために、堅牢なだけでなく多用途のルーティングメカニズムも必要です。

この記事は、Next.js 13.3 で導入された強力な機能である並列ルートを理解できるように、細心の注意を払って作成されています。

目的は 2 つあります。1 つ目は、並列ルートの重要性と実際のアプリケーションを明確に理解すること、2 つ目は、Next.js プロジェクトで並列ルートを効率的に実装するための実践的な洞察を提供することです。

並行ルートの変革の可能性と、並行ルートが Web アプリケーション設計の境界をどのように再定義しているかを探るために、この旅を始めましょう。

2. 並行ルート以前の世界

並列ルートが始まる前は、Web 開発者が単一のビューでコンテンツを動的に構造化して表示する方法には限界がありました。従来のルーティングメカニズムはかなり直線的で、1 つの URL、1 つのビューでした。

たとえば、一般的なダッシュボードの設計を考えてみましょう。

 // pages/dashboard/user.js function User() { return <div>User Dashboard</div>; } // pages/dashboard/team.js function Team() { return <div>Team Dashboard</div>; }

/dashboard/userに移動するとユーザーダッシュボードが表示され、 /dashboard/teamに移動するとチームダッシュボードが表示されます。この 2 つは相互に排他的でした。別のセグメントを表示するには、通常、ユーザーは現在のビューから完全に離れる必要があります。

これは、特に開発者が Web サイトの複数のセグメントを同時にまたは条件付きで表示したい場合に、課題を引き起こしました。従来のルーティングアプローチには柔軟性がなかったため、複雑な状態管理や回避策を使用せずに、並べたダッシュボードやモーダルなどの複雑で対話型のレイアウトを作成することが困難でした。

ありがたいことに、Next.js などのフレームワークの進化と並列ルートの導入により、この状況は劇的に変わり、動的で適応性のある Web デザインの新時代が到来しました。

3. 並行ルートを理解する

並列ルートは Next.js 13.3 で導入された画期的な機能であり、開発者がルーティングと Web 上のコンテンツのプレゼンテーションに取り組む方法を大きく変えます。

3.1 並列ルートの概要:

Next.js 13.3 では、新しい動的規約が導入され、より高度なルーティングケースの実装が可能になります。ドキュメントに記載されているように、

「並列ルートを使用すると、複雑なダッシュボードやモーダルのように、同じビューに複数のページを表示できます。並列ルートを使用すると、同じビューに 1 つ以上のページを同時にレンダリングでき、個別にナビゲートできます。」

簡単に言うと、アプリのさまざまなコンポーネントやセクションを同時に読み込むことができ、特に特定のコンポーネントがデータのフェッチやレンダリングに時間がかかる場合に、流動性と応答性を実現します。

3.2 使用例: ダッシュボード、モーダルなど:

最新の Web アプリケーションの構造では、多くの場合、基礎となるコンテンツを失わずに、複数のビューを組み合わせたり、コンテキストに応じたポップアップを必要とする高度なレイアウトが必要になります。

ドキュメントから例を取り上げます。

 dashboard |__ @user |____ page.js |__ @team |____ page.js |__layout.js |__ page.js

このレイアウトは、この新しいルーティングアプローチに固有の機能である名前付きの「スロット」を使用して、並列ルートを使用して同じビューにユーザーとチームのダッシュボードを同時に表示する方法を示しています。

3.3 利点: 複数ページ表示、条件付きレンダリング、独立したナビゲーション:

並行ルートの利点は多岐にわたります。強調表示されているように、次のことが許可されます。

「独立してナビゲートできる、同じビュー内の 1 つ以上のページの同時レンダリング」。

さらに、ページの条件付きレンダリングにも利用できるため、Web アプリケーションに前例のないレベルの柔軟性とダイナミズムを提供できます。

基本的に、パラレルルートの出現により、Web 開発者は、現代の Web の進化するニーズに合わせてカスタマイズされた、複雑で動的でユーザーフレンドリーな Web インターフェイスを構築する能力が向上しました。

4. 並行ルートの仕組み

Parallel Routes をさらに深く掘り下げると、Next.js 13.3 がいかに賢く構築されているかがわかります。詳細を段階的に見ていきましょう。

4.1 「スロット」と @folder 規約の導入:

パラレルルートの中心となるのは「スロット」の概念です。スロットは、Web サイトのさまざまなページまたは一部を表示できる指定された領域と考えてください。

@folder規則は、ドキュメントの注記に示されているように、これらのスロットを設定するために使用されるメソッドです。

「並列ルートは、@folder メソッドを使用して定義されたこれらの名前付きの「スロット」を使用します。」

コードの説明:
- 並列ルートのフォルダー構造: 次の例を考えてみましょう。
```
 dashboard |__ @user │____ page.js |__ @team |____ page.js |__ layout.js |__ utilities.js |__ page.js
```
  ここで、「@user」と「@team」はさまざまなコンテンツのコンテナとして機能し、Web サイトをより柔軟に設計できるようになります。
- レイアウトがスロットを小道具として使用する方法: ドキュメントに基づくと、同じルートセグメント内のレイアウトはこれらのスロットを小道具として利用できます。以下に明確な例を示します。
```
 export default async function Layout({ children, user, team }) { const userType = getCurrentUserType(); return ( <> {userType === 'user' ? user : team} {children} </> ); }
```
- 注: 上記のコードでは、 getCurrentUserType()関数を使用してユーザーのタイプを決定し、これによってuserスロットとteamスロットのどちらが表示されるかが決まります。
暗黙的ルートスロットと明示的ルートスロット: Next.js ルーティングの強みの 1 つは、その柔軟性です。この例の「@user」と「@team」は定義した明示的なスロット ( @folderに直接リンクされています) ですが、暗黙的なスロットまたは自動スロットもあります。
ドキュメントでは次のように説明されています。
" childrenはこの種の自動スロットであり、これを@folderに関連付ける必要はありません。したがって、 dashboard/page.jsはdashboard/@children/page.jsと同じように機能します。"

Parallel Routes がどのように動作するかを徹底的に把握することで、開発者は Next.js 13 の機能を最適化し、より直感的で適応性のある Web サイトを作成できます。

5. 並行ルートの使用方法に関するステップバイステップガイド

5.1 新しい Next.js アプリのセットアップ

新しい Next.js アプリケーションを作成することから始めます。

 npx create-next-app@latest parallel-routes

新しく作成したアプリのディレクトリに移動します。

 cd parallel-routes

開発サーバーを起動します。

 yarn dev

5.2 アプリの構造化

プロジェクトディレクトリに、次のフォルダーとファイルを作成します。

 app |__ @folder1 |____ page.js |__ @folder2 |____ page.js |__ page.js |__ layout.js

5.3 コンプの作成とデータ読み込みのシミュレーション

app/@folder1/page.jsで、コンポーネントが読み込まれる視覚的な順序を理解するために、読み込み時間を表示およびシミュレートするコンポーネントを作成します。

 export default async function Page() { // simulate loading time for 6 seconds await new Promise(resolve => setTimeout(resolve, 6000)); return <h4>FOLDER 1 COMPONENT LOADED</h4> }

同様に、 app/@folder2/page.jsでは次のようになります。

 export default async function Page() { // simulate loading time for 8 seconds await new Promise(resolve => setTimeout(resolve, 8000)); return <h4>FOLDER 2 COMPONENT LOADED TWO SECONDS LATER</h4> }

これらのシミュレートされた読み込み時間により、並列ルートの機能を視覚的に評価できます。

5.4 レイアウトコードの更新

app/layout.jsで、2 つのフォルダーが収まるようにレイアウトコードを調整します。

前に：

 // ... (existing imports) export default function RootLayout({ children }) { return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ) }

後：

 // ... (existing imports) export default function RootLayout({ children, folder1, folder2 }) { return ( <html lang="en"> <body className={inter.className}> <div> {folder1} </div> <div> {folder2} </div> {children} </body> </html> ); }

読みやすさを高めるために、レイアウトを自由にスタイル設定してください

5.5 ロード状態の追加

Next.Js のドキュメントには次のように記載されています。

特別なファイルloading.js React Suspenseで意味のあるLoading UIを作成するのに役立ちます。この規則を使用すると、ルートセグメントのコンテンツの読み込み中に、サーバーからの瞬時の読み込み状態を表示できます。レンダリングが完了すると、新しいコンテンツが自動的に置き換えられます。

各コンポーネント (folder1 とfolder2) に対して、読み込み状態を作成します。フォルダー構造は次のようになります。

 app |__ @folder1 |____ page.js |____ loading.js |__ @folder2 |____ page.js |____ loading.js |__ page.js |__ layout.js

app/@folder1/loading.js

 export default function Loading() { return <p>LOADING FOLDER 1...</p> }

app/@folder2/loading.js

 export default function Loading() { return <p>LOADING FOLDER 2...</p> }

5.6.ページを変更する

app/page.jsの内容を調整します。

この変更により、メインページには何も表示されなくなり、並列ルートが強調表示されます。

 import Image from 'next/image' import styles from './page.module.css' export default function Home() { // anything you add here will be rendered as a children of RootLayout return null }