クライアントサイドナビゲーション
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>タグを使用してください。