8
チャプター8
クライアントサイドナビゲーション
Link コンポーネントは、同じ Next.js アプリ内の 2 つのページ間でのクライアントサイドナビゲーションを可能にします。
クライアントサイドナビゲーションとは、ブラウザによるデフォルトのナビゲーションよりも高速な、*JavaScript を使用した* ページ遷移のことです。
これを検証する簡単な方法を以下に示します。
- ブラウザの開発者ツールを使用して、
<html>のbackgroundCSS プロパティをyellowに変更してください。 - リンクをクリックして、2 つのページ間を行き来してください。
- ページ遷移の間、黄色の背景が維持されているのがわかります。
これは、ブラウザが完全なページを読み込んでいるわけではなく、クライアントサイドナビゲーションが機能していることを示しています。
<Link href="…"> の代わりに <a href="…"> を使用してこれを実行した場合、ブラウザは完全なリロードを行うため、リンククリック時に背景色がクリアされます。
コード分割とプリフェッチ
Next.js はコード分割を自動的に行うため、各ページは必要なものだけを読み込みます。つまり、ホームページがレンダリングされるときに、他のページのコードは初期状態では提供されません。
これにより、数百ページがあってもホームページが迅速に読み込まれることが保証されます。
リクエストしたページのみのコードを読み込むということは、ページが分離されることも意味します。特定のページでエラーが発生しても、アプリケーションの他の部分は引き続き機能します。
さらに、Next.js の本番ビルドでは、Link コンポーネントがブラウザのビューポートに表示されると、Next.js はリンクされたページのコードをバックグラウンドで自動的にプリフェッチします。リンクをクリックする頃には、目的のページのコードはすでにバックグラウンドで読み込まれており、ページ遷移はほぼ瞬時に行われます！
まとめ
Next.js は、コード分割、クライアントサイドナビゲーション、および（本番環境での）プリフェッチによって、アプリケーションを最高のパフォーマンスのために自動的に最適化します。
pages ディレクトリの下にファイルをファイルとしてルートを作成し、組み込みの Link コンポーネントを使用します。ルーティングライブラリは必要ありません。
Link コンポーネントの詳細については、next/link の API リファレンスを、ルーティング全般についてはルーティングドキュメントを参照してください。
注: Next.js アプリケーションの外部の外部ページにリンクする必要がある場合は、
Linkを使用せずに<a>タグを使用してください。
役に立ちましたか？