この講座はYouTubeで動画形式でも用意しています。合わせてご覧ください。

はじめに

前回は、Next.jsの基礎となるReactを学びました。今回からはNext.jsの内容を学習していきます。

Next.jsでページ遷移を実装する

ページ間を移動する

Next.jsではルート配下のpagesフォルダにファイルを設置するだけで、ファイル名に基づいてルートが関連づけられるようになっています。例えば、次のようになります。

/pages/index.tsx に配置したファイルのURLは、/
/pages/first-post.tsx に配置したファイルのURLは、/first-post
/pages/posts/first-post.tsx に配置したファイルのURLは、/posts/first-post

URLから直接ページを表示できる様子は動画の1:34から確認できます。

Linkコンポーネント

Linkコンポーネントをは、Next.jsプロジェクト内のページ間で行き来する時には用います。<a>タグによって遷移するのではなくLinkコンポーネントを用いることによって、クライアントサイドでのナビゲーションが可能になります。これによって差分だけを読み込むことができるので、高速なページ遷移を実現することが可能になります。

Linkコンポーネントは、next/linkからインポートできます。

import Link from 'next/link'

使用する際には<a>タグと組み合わせて用います。Linkコンポーネントのhref属性にパスを指定します。

<Link href="/">
  <a>back to home</a>
</Link>

<Link href="/first-post">
  <a>this page!</a>
</Link>

差分だけが読み込まれている様子は、動画の5:52から解説しています。サーバサイドから全体を読み込む必要なく遷移できるNext.jsの特徴の1つです。

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

Next.jsで差分ロードができるということを紹介しましたが、もう少しその仕組みを詳しくみてみましょう。

Next.jsは自動的にコードを分割するため、各ページはそのページに必要なものだけをロードします。そしてLinkコンポーネントがブラウザのビューポート(表示領域)へ表示される度に、バックグラウンドでリンクされたページのコードを自動的にプリフェッチします。

今回は静的なルーティングのみを紹介しましたが、動的なパスを設定するダイナミックルーティングという機能もありますので、興味のある方は調べてみてください。

まとめ

React × Next.jsでのページ遷移の方法について学習しました。
次回は、画像などのアセット、メタデータ、CSSについて学習します。

React × Next.js 実践開発入門 #4 Next.jsでページ遷移を実装する