Twitter

Category

もっと見る

Tag

もっと見る

    HOME  >  Web開発 >  【Next.js】App Routerの基本を理解する

Web開発

【Next.js】App Routerの基本を理解する

【Next.js】App Routerの基本を理解する

目次

  1. App Routerとは？
  2. 予約ファイル
  3. App Routerを利用してみる
  4. ルートパラメーター
  5. クエリパラメーター

Reactでは、React Routerライブラリでルーターを導入していました。

詳しくは下記の記事をご参照ください。

【React.js】React Routerで画面遷移をしてみよう
https://www.my-nombiri-tec-blog.jp/web_development/2042/

ただし、Next.jsでは、React Routerとは異なり、独自のルーターが標準搭載されています。

React Routerのようなライブラリのインストールや難しい設定は不要です。

前回の記事：
【Next.js】Next.jsとは？環境構築やHello World表示までをご紹介
https://www.my-nombiri-tec-blog.jp/web_development/2114/

App Routerとは？

Next.jsにおける標準のルーターには、もともと「Pages Router」というものがありました。

ですが、Next 13から新たにApp Routerが導入されました。

App Routerはまだ登場してから間もないですが、新たに学ぶのであれば、旧ルーターのPages RouterよりもApp Routerを選ぶべきです。

App Routerはフォルダーベースのルーターです。

React Routerのようなルート定義などは不要で、「app」ディレクトリ配下のフォルダ階層に応じて、リクエストパスとコンポーネントとの対応関係が自動的に決まります。

例えば、デフォルトで入っている「app」フォルダ直下のpage.tsxファイルは「/」でアクセスできますし、「app」フォルダ直下に「about」というフォルダを作成し、その中にpage.tsxファイルを作成すれば、そのファイルは「/about」でアクセス可能です。

ファイル名は固定で、フォルダー名のみでリクエストパスが決まります。

予約ファイル

説明した通り、App Routerにおいて、フォルダー名が個々のルートセグメント（「/」で区切られたパス個々の部分）を構成します。

フォルダーに対し、ファイルは対応するページを構成します。

前述のpage.tsxはページの中身を表すファイルですが、他にもあります。

App Routerにおける主な予約ファイル

layout.tsxレイアウトを生成するファイル
page.tsxページの中核となるファイル
loading.tsxローディングUIを生成するファイル
error.tsxエラーページを生成するファイル
not-found.tsxNot Foundページを生成するファイル

このようにファイル名は決まっており、役割も様々です。

App Routerを利用してみる

それでは早速、App Routerを使ってみましょう。

「app」ディレクトリ内に「about」フォルダを作成して見ましょう。

「about」フォルダ内にpage.tsxを作成し、下記のように記述しましょう。

about > page.tsx

const About = () => {
  return <h1>Aboutページ</h1>;
};

export default About;

これで「http://localhost:3000/about」にアクセスしましょう。

下記のようにaboutページにアクセスできました。

このように、App Routerは難しいことは何もなく、簡単にルーティングできました。

ルートパラメーター

ルートパラメーターについては、App Router特有のルールがあります。

ルートパラメーターを設定する場合、下記のようなフォルダ構成になります。

.
└─ app
    └─ archive
        └─ [id]
            └─ page.tsx

少し違和感がありますが、[id]というフォルダ名をつけます。

こうすることで、例えば下記のようなルートパラメーター付きのリクエストになります。

/archive/108

さらに、[…名前]とするとキャッチオールセグメント（複数のルートパラメーター）を意味し、[[…名前]]にすると、省略可能なキャッチオールセグメントを意味します。

下記のようなフォルダ階層に対するリクエストになります。

archive/[id]/page.tsx → /archive/108
search/[...keywords]/page.tsx → /search/react/next
search/[[...keywords]]/page.tsx → /search もしくは /search/react/nex

それでは、実際に試してみましょう。

「app」ディレクトリ直下に、singleフォルダを作成し、その中に[id]フォルダを作成しましょう。

そして、[id]フォルダの中に、page.tsxファイルを作成し、下記のように記述してください。

const Single = async ({ params }: { params: Promise<{ id: string }> }) => {
  const { id } = await params;
  return <p>記事ID：{id}</p>;
};

export default Single;

関数コンポーネントの引数で、paramsを取得するのですが、少し書き方が複雑です。

これは、Next15からのparamsの非同期化対応による仕様変更により多少複雑な書き方に変わっています。

特筆すべき点はそこだけで、あとは、パラメーターからidを取得して、jsxで出力しているだけです。

ここで注意すべき点は、非同期化対応のため、パラメーター取得の際はasync awaitで書かなければならない点です。

これでブラウザで確認し、下記のように問題なくパラメーター値が表示されれば成功です。

「http://localhost:3000/single/555」にアクセスした場合

クエリパラメーター

Nextでクエリパラメーターを扱う場合は、useSearchParamsを利用します。

ただ、注意が必要です。

Nextには、通常のコンポーネントは自動的にSSR（サーバーサイドレンダリング*）になる仕様があります。

*サーバーサイドレンダリング：サーバー側でレンダリングを行うレンダリング手法

ですが、useSearchParamsはSSRでは利用ができず、CSR（クライアントサイドレンダリング*）でしか利用できません。

*クライアントサイドレンダリング：クライアント側でレンダリングを行うレンダリング手法

なので、コンポーネントをCSR化する必要があります。

CSR化するには、ファイルの先頭に、’use client’と記述する必要があります。

※このSSRやCSRの詳細は後日、記事を上げようと思います

先ほどのルートパラメーターの例をクエリパラメーターで書き換えてみましょう。

appディレクトリ直下にsingle2フォルダを作成し、その中にpage.tsxファイルを作成します。

page.tsxファイル内には下記のように記述しましょう。

"use client";

import { useSearchParams } from "next/navigation";

const Single2 = () => {
  const searchParams = useSearchParams();
  const id = searchParams.get("id") || "";
  return <p>記事ID：{id}</p>;
};

export default Single2;

useSearchParamsをimportして、使います。

そして、パラメーターの値を取得するには、React RouterのようにsearchParams.get(パラメーター値)で取得できます。

関連記事

関連記事