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