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 }

免責事項

並行ルートで練習しているときに、ホットリロードするとルートが期待どおりに表示されないことがわかりました。私はこの問題を調査していないので、何が問題なのかを正確に伝えることはできません。この問題が発生した場合は、開発サーバーを再起動して変更を反映してください。

結論

Next.js 13.3 で導入された並列ルートは、Web 開発の分野で大きな進歩を遂げました。

従来のルーティングでは、より直線的なエクスペリエンスが提供されますが、その開始前、開発者は Web サイトの複数のセグメントを同時に表示するという課題に直面していました。

Next.js は、並列ルートを使用して動的な Web デザインに革新的なアプローチを提供し、単一のビューで複数のページを同時にレンダリングできるようにします。

この強力な機能は、ユーザー エクスペリエンスを強化するだけでなく、複雑なレイアウトや条件付きレンダリングを容易にし、現代の Web アプリケーション設計の限界を押し広げます。

上記の詳細なガイドに従うことで、開発者は、「スロット」や「@folder」規約などの中心的な概念の理解から、Next.js フレームワークを使用した実際の実装に至るまで、並列ルートの仕組みを深く掘り下げることができます。

注目のホット リロードの問題など、いくつかの困難はあるかもしれませんが、並行ルートによって Web アプリケーションに柔軟性とダイナミズムが追加されるため、学習曲線を学習する価値があります。

デジタル環境が進化し続けるにつれて、このようなツールや機能が Web 開発の未来を形作る上で極めて重要な役割を果たすことは間違いありません。

改めて、皆様の忍耐と献身に感謝いたします。

フィードバックや質問がありますか?お気軽にシェアしてください。あらゆる声が価値を高めます。

連絡してください:

dev.toコミュニティ@leandro_nnz hackernoon.comコミュニティ@leandronnz hashnode.com leandronnz twitter.com @digpollution

次回まで、コーディングを楽しんでください。

参考文献

このリポジトリの完全なコードはここにあります。

Next.js の公式ドキュメントはこちら。

この記事の作成にはStackEditを使用しました。

UnsplashのMarkus Spiskeによる写真