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>タグを使用するだけです。
お役に立ちましたか？