😽

reactチュートリアル2（Navigate Between Pages）

2024/03/04に公開

tech

NextJSの学習をする。
以下のページを翻訳し記録する。

Navigate Between Pages | Learn Next.js

これまでのところ、作成した Next.js アプリには 1 ページしかありません。Web サイトや Web アプリケーションには通常、さまざまなページが多数あります。

アプリケーションにさらにページを追加する方法を見てみましょう。

このレッスンで学ぶこと

このレッスンでは、次のことを行います。

統合ファイルシステムのルーティングを使用して新しいページを作成します。
Linkコンポーネントを使用して、クライアントサイドでのページ完のナビゲーションを有効にする方法を学びます。
コード分割とプリフェッチの組み込みサポートについて学びます。

Next.js ルーティングに関する詳細なドキュメントをお探しの場合は、ルーティングドキュメントを参照してください。

ページ間の移動 | Next.js を学ぶ

前のレッスンから続けている場合は、このページをスキップできます。次のページに進むには、ここをクリックしてください。

Next.js のページ - ページ間を移動する | Next.js を学ぶ

Next.js では、ページはpagesディレクトリ内のファイルからエクスポートされた React コンポーネントです。

ページは、ファイル名に基づいてルートに関連付けられます。たとえば、開発では次のようになります。

pages/index.js は / ルートに関連付けられています。
pages/posts/first-post.js は /posts/first-post ルートに関連付けられています。

新しいページを作成する

pagesの下にpostsディレクトリを作成します。

postsディレクトリ内に次の内容のfirst-post.jsというファイルを作成します。

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

コンポーネントには任意の名前を付けることができますが、defaultエクスポートとしてエクスポートする必要があります。

次に、開発サーバーが実行されていることを確認し、http://localhost:3000/posts/first-postにアクセスします。次のページが表示されるはずです。

Alt text

これは、Next.js でさまざまなページを作成する方法です。

pagesディレクトリ配下に JS ファイルを作成するだけで、そのファイルへのパスが URL パスになります。

ある意味、これは HTML または PHP ファイルを使用して Web サイトを構築するのと似ています。HTML を記述する代わりに、JSX を記述し、React コンポーネントを使用します。

ホームページからそのページに移動できるように、新しく追加したページへのリンクを追加しましょう。

リンクコンポーネント - ページ間を移動する | Next.js を学ぶ

Web サイトのページ間でリンクを張る場合は、<a>HTML タグを使用します。

Next.js では、Linkコンポーネントを使用してnext/linkアプリケーション内のページ間をリンクできます。<Link>はクライアント側のナビゲーションを実行できるようにし、ナビゲーション動作をより適切に制御するためのpropsを受け入れます。

<Link>を使用する

まず、pages/index.jsを開き、次の行を先頭に追加してnext/linkからLinkコンポーネントをインポートします。

import Link from 'next/link';

次に、次のような h1 タグを見つけます。

<h1 className={styles.title}>
  Learn <a href="https://nextjs.org">Next.js!</a>
</h1>

そしてそれを次のように変更します。

<h1 className={styles.title}>
  Read <Link href="/posts/first-post">this page!</Link>
</h1>

次に、pages/posts/first-post.js を開いてその内容を次のように置き換えます。

import Link from 'next/link';

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

ご覧のとおり、このLinkコンポーネントは <a> タグの使用に似ていますが、<a href="…"> の代わりに <Link href="…"> を使用します。

注:Link Next.js 12.2 より前では、コンポーネントを<a>タグでラップする必要がありましたが、バージョン 12.2 以降ではその必要はありません。

クライアント側ナビゲーション - ページ間を移動する | Next.js を学ぶ

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

この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コンポーネントの詳細については、 API リファレンスnext/linkで、ルーティング全般についてはルーティングドキュメントで学ぶことができます。

注: Next.js アプリの外部の外部ページにリンクする必要がある場合は、Linkではなく<a>タグを使用してください。