ページとルーティング

この章では、Next.jsの最も基本的な機能であるページとルーティングについて学びます。Next.jsでは、ファイルシステムベースのルーティングを採用しているため、pagesディレクトリにファイルを作成するだけで、新しいページが作成され、自動的にルーティングが設定されます。このシンプルで直感的な仕組みを理解し、実際にページを作成しながら、Next.jsの基本をマスターしましょう。

1. 最初のページを作成する

まずは、pagesディレクトリ内に新しいファイルを作成して、最初のページを作成してみましょう。

`pages`ディレクトリの役割

pagesディレクトリは、Next.jsアプリケーションのページコンポーネントを配置するための特別なディレクトリです。このディレクトリ内に配置されたReactコンポーネントは、自動的にページとして認識され、ファイル名に基づいたルーティングが設定されます。

ファイル名とURLの関係

pagesディレクトリ内のファイル名は、そのままURLのパスに対応します。例えば、pages/about.tsxというファイルを作成すると、/aboutというURLでアクセスできるようになります。

早速、pagesディレクトリ内にabout.tsxというファイルを作成し、以下のコードを記述してみましょう。

tsx

// pages/about.tsx

const AboutPage = () => {
  return (
    <div>
      <h1>About</h1>
      <p>This is the about page.</p>
    </div>
  );
};

export default AboutPage;

これは、"About"という見出しと、"This is the about page."というテキストを表示する、シンプルなReactコンポーネントです。

次に、開発サーバーを起動して、作成したページを確認してみましょう。ターミナルで以下のコマンドを実行します。

bash

npm run dev

使用するコマンド	説明
`yarn dev`	yarnで同様のコマンドを実行する場合
`pnpm dev`	pnpmで同様のコマンドを実行する場合

このコマンドにより、開発サーバーが起動し、通常はhttp://localhost:3000でアプリケーションにアクセスできるようになります。

ブラウザでhttp://localhost:3000/aboutにアクセスすると、先ほど作成したabout.tsxの内容が表示されます。

Reactコンポーネントの基礎

上記のabout.tsxのコードは、Reactの関数コンポーネントと呼ばれる形式で記述されています。Reactコンポーネントは、UIを構築するための基本的な部品です。

tsx

const AboutPage = () => {
  return (
    <div>
      <h1>About</h1>
      <p>This is the about page.</p>
    </div>
  );
};

export default AboutPage;

このコードは、以下のように解釈できます。

const AboutPage = () => { ... }: AboutPageという名前の関数を定義しています。この関数が、Reactコンポーネントです。
return ( ... );: コンポーネントが返す内容を記述します。ここでは、JSXと呼ばれる記法を使って、HTMLのような構造を記述しています。
<div>, <h1>, <p>: HTMLの要素に対応するJSXの要素です。
export default AboutPage;: AboutPageコンポーネントをエクスポートしています。これにより、他のファイルからこのコンポーネントをインポートして使用できるようになります。

Reactコンポーネントの基本的な書き方については、Reactの公式ドキュメントなどを参照してください。

2. ページ間のリンクを作成する

Webサイトやアプリケーションでは、複数のページ間を移動できるようにリンクを設定する必要があります。Next.jsでは、Linkコンポーネントを使用して、簡単にページ間のリンクを作成できます。

`Link`コンポーネントの使用方法

Linkコンポーネントは、Next.jsが提供する特別なコンポーネントで、クライアントサイドナビゲーションを実現します。Linkコンポーネントを使用すると、ページ全体をリロードすることなく、ページ間を遷移できます。

まずは、pages/index.tsxを以下のように変更して、トップページからaboutページへのリンクを追加してみましょう。

tsx

// pages/index.tsx
import Link from 'next/link';

const HomePage = () => {
  return (
    <div>
      <h1>Home</h1>
      <p>Welcome to the homepage!</p>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  );
};

export default HomePage;

Linkコンポーネントを使用するには、まずnext/linkからインポートする必要があります。

tsx

import Link from 'next/link';

次に、Linkコンポーネントで<a>タグをラップし、href属性にリンク先のパスを指定します。

tsx

<Link href="/about">
  <a>About</a>
</Link>

これで、トップページに"About"というリンクが表示され、クリックすると/aboutページに遷移できるようになります。

`<a>`タグとの違い

Linkコンポーネントは、内部的には<a>タグを使用していますが、<a>タグを直接使用するのとは、いくつかの重要な違いがあります。

Linkコンポーネントを使用すると、クライアントサイドナビゲーションが実現され、ページ遷移が高速になります。
Linkコンポーネントは、遷移先のページを事前に読み込む（プリフェッチする）ことで、さらに高速なページ遷移を実現できます。

そのため、Next.jsアプリケーション内でのページ遷移には、常にLinkコンポーネントを使用することが推奨されます。

動的なルートパラメータの使用方法

Next.jsでは、ファイル名に[]を使用することで、動的なルートパラメータを定義できます。例えば、pages/posts/[id].tsxというファイルを作成すると、/posts/1、/posts/2などのURLに対応するページを作成できます。

pages/postsディレクトリを作成し、[id].tsxファイルを作成して、以下のコードを記述してみましょう。

tsx

// pages/posts/[id].tsx

import { useRouter } from 'next/router';

const PostPage = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Post ID: {id}</h1>
    </div>
  );
};

export default PostPage;

ここでは、next/routerからuseRouterフックをインポートして、routerオブジェクトを取得しています。router.queryには、ルートパラメータが含まれており、idというキーでアクセスできます。

ブラウザでhttp://localhost:3000/posts/1やhttp://localhost:3000/posts/123などにアクセスすると、それぞれのパラメータの値がページに表示されます。

3. 404ページのカスタマイズ

Webサイトにアクセスした際に、存在しないページにアクセスした場合、通常は404エラーページが表示されます。Next.jsでは、404ページを簡単にカスタマイズできます。

`pages/404.tsx`の作成

pagesディレクトリに404.tsxというファイルを作成するだけで、カスタム404ページを作成できます。

tsx

// pages/404.tsx

const NotFoundPage = () => {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>The page you are looking for does not exist.</p>
    </div>
  );
};

export default NotFoundPage;

これで、存在しないページにアクセスした際に、このカスタム404ページが表示されるようになります。

カスタムエラーページの表示

404エラーだけでなく、500エラーなどの他のエラーページもカスタマイズできます。詳しくは、Next.jsの公式ドキュメントを参照してください。