ルーティングと画面遷移

Next.js は、React をベースにしたフレームワークで、ルーティングや画面遷移の仕組みを提供しています。さっそく使い方を見ていきましょう。

ルーティング

App Routerでは、src/app配下のディレクトリ構造によって、ルーティングのパス（URL）を定義します。例えば、/profile/settingsという URL で表示するページを作成する場合、src/app/profile/settingsというディレクトリを作成します。

そして、その中にpage.tsxというファイルを作成することで、ページの内容を定義します。page.tsxという名前は、App Routerの規約によって定めれれている、固定のファイル名です。

alt text

実際にファイルを作成して、ページを開いてみましょう。

src/app/profile/settings/page.tsxに以下のコードを追加してください。

src/app/profile/settings/page.tsx
export default function Settings() {
  return <h1>設定ページ</h1>;
}

http://localhost:3000/profile/settings にアクセスすると、設定ページと表示されていることが確認できます。これが基本のルーティングの仕組みです。

Segment

ここで、一つ用語を覚えておきましょう。Segmentとは、URL のパスをスラッシュ / で区切った部分のことです。例えば、/profile/settingsの場合、profileとsettingsがSegmentになります。

layout.tsx

これまで、layout.tsxというファイルが何度か登場しています。layout.tsxは、各segmentに対して一つずつ作成することができます。例えば、先ほどのsrc/app/profile/settingsというディレクトリに対して、layout.tsxを作成することができます。そして、layout.tsxはネストされてページにレイアウトが適用されます。

実際に具体例を見ていきましょう。

src/app/profile/settings/layout.tsxファイルを作成し、以下のコードを追加してください。

src/app/profile/settings/layout.tsx
export default function SettingsLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <div>
      <h1>プロフィールページ</h1>
      {children}
    </div>
  );
}

そして、src/app/layout.tsxの return の中身を以下のコードに変更してください。

src/app/layout.tsx
<html lang="en">
  <body className={rocknRoll.className}>
    <h1>全体のレイアウト</h1>
    {children}
  </body>
</html>

http://localhost:3000/profile/settings にアクセスすると、全体のレイアウト、プロフィールページ、設定ページの順番で表示されていることが確認できます。

つまりlayout.tsxはそのファイルが存在するディレクトリ以下のすべてのページに適用されるということがわかります。この仕組みを利用して、アプリのレイアウトを組んでいくことになります。

注記

あるページでは親のレイアウトを適用したくない、というケースもあるでしょう。その場合、Route Groupsという機能を使います。あとの章で改めて説明します。

画面遷移

次に、画面遷移の仕組みを見ていきましょう。通常の html での画面遷移は、<a>タグを使って行いますが、Next.js では<Link>コンポーネントを使って画面遷移を行います。

<a>タグと<Link>コンポーネントの違いを確認するために、src/app/page.tsxに以下のコードを追加してください。

src/app/page.tsx
import Image from "next/image";
import { mkpop, roboto } from "./fonts";
import type { Metadata } from "next";
import Link from "next/link";

export const metadata: Metadata = {
  title: "ホームページ",
  description: "チュートリアルのホームページ",
};

export default function Home() {
  return (
    <div>
      <h1 className={`${roboto.className} text-4xl`}>新しいページ roboto</h1>
      <h1 className="text-4xl">新しいページ rocknRoll</h1>
      <h1 className={`${mkpop.className} text-4xl`}>新しいページ mkpop</h1>
      <Image src="/test.jpg" alt="Next.js" width={200} height={200} />
      <a className="block" href="/profile/settings">
        プロフィールページへ：aタグ
      </a>
      <Link className="block" href="/profile/settings">
        プロフィールページへ：Linkタグ
      </Link>
    </div>
  );
}

それぞれをクリックして、画面遷移の挙動を確認してみてください。

<a>タグを使った場合、ブラウザ側でページ全体がリロードされるため、一瞬ページが読み込み状態になり遷移に若干時間がかかるはずです。一方、<Link>コンポーネントを使った場合、ブラウザのリロードが発生せず、JavaScript によって画面の書き換えが行われます。そのため、画面遷移が一瞬で行われるはずです。

また、<Link>コンポーネントの場合、遷移先のページをプリフェッチします。つまり遷移する前から、遷移先のページのデータを取得してくれるので、ページ表示速度が向上し、ユーザー体験が高くなります。

Next.js でアプリを実装する場合は、基本的に<Link>コンポーネントを使って画面遷移を行うようにしましょう。