SSR フレームワーク Next.js を使って React を快適ルーティング part2

前回の続きです。
まだ、ページをちょこっと編集しただけなので、今回はアプリケーションにページを追加してみます。

ページ間を移動する

新しいページを作成する

• 必要なファイルを作成する

mkdir pages/posts/
touch pages/posts/first-post.js

• pages/posts/first-post.js を編集する

pages/posts/first-post.js

export default function FirstPost() {
  return <h1>First Post</h1>
}

• ブラウザで http://localhost:3000/posts/first-post にアクセスする
  

リンクコンポーネントを使う

• pages/index.js を開く
• 以下を先頭行に追記する

pages/index.js

import Link from 'next/link'

• 次に h1 タグの内容を変更する

pages/index.js

Learn <a href="https://nextjs.org">Next.js!</a>
↓
Read <Link href="/posts/first-post"><a>this page!</a></Link>

• 次に pages/posts/first-post.js を以下の通り書き換える

pages/posts/first-post.js

import Link from 'next/link'

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  )
}

• 動作確認しよう
  

クライアント側のナビゲーション

クライアント側のナビゲーションとは、ページ遷移がJavaScriptを使用して行われることを意味します。これは、ブラウザが行うデフォルトのナビゲーションよりも高速です。

開発者ツールを使って html 全体の背景を設定してみましょう。
黄色の背景がページ遷移しても持続していることが分かります。

これは、ブラウザがページ全体を読み込まず、クライアント側のナビゲーションが機能していることを示しています。

コード分割とプリフェッチの話

Next.js は自動的にコード分割するため、各ページはそのページに必要なものだけをロードします。
つまり、ホームページがレンダリングされるとき、他のページのコードは読み込まれないことを意味します。
これは大変素晴らしいですね！
これにより、数百ページを追加した場合でも、ホームページがすばやく読み込まれます。

リクエストしたページのコードをロードするだけでも、ページが分離されます。
特定のページがエラーをスローしても、アプリケーションの残りの部分は引き続き機能します。

さらに、Next.jsのプロダクションビルドでは、Linkコンポーネントがブラウザのビューポートに表示されるたび、Next.js がバックグラウンドでリンクされたページのコードを自動的にプリフェッチします。リンクをクリックするまでに、リンク先ページのコードはすでにバックグラウンドで読み込まれており、ページ遷移はほぼ瞬時に行われます！

今回使った Link コンポーネントの詳細はこちらを参照ください。

続く...