Dynamic Routes

ダイナミックルーツ

Dynamic Routes を分かりやすく

Dynamic Routes は Next.js のルーティング機能の一つで、動的に URL パラメータを扱うことができます。これにより、同じページコンポーネントを使って、異なるデータを表示することができます。例えば、ブログ記事や商品ページなど、同じレイアウトで異なるコンテンツを表示する場合に便利です。

Dynamic Routes の設定方法

Dynamic Routes を設定するには、以下の手順に従います。

1 pages ディレクトリ内に、[param].tsx の形式でファイルを作成します。ここで、[param] は URL パラメータの名前を表します。例えば、[id].tsx というファイル名にすると、id というパラメータが URL に含まれることを意味します。

2 作成したファイル内で、getStaticPaths と getStaticProps 関数を定義します。getStaticPaths 関数は、事前に生成されるパスの一覧を返す関数です。getStaticProps 関数は、パスごとの静的プロパティを返す関数です。

3 ページコンポーネント内で、URL パラメータを取得し、表示するデータを動的に切り替えます。

Dynamic Routes の実装例

以下に、Next.js と TypeScript を使用した Dynamic Routes の実装例を示します。

まず、pages/posts/[id].tsx というファイルを作成します。これにより、/posts/:id という URL パターンのページが作成されます。

// pages/posts/[id].tsx

import { GetStaticPaths, GetStaticProps, NextPage } from "next";
import { useRouter } from "next/router";

type Post = {
  id: string;
  title: string;
  content: string;
};

type PostPageProps = {
  post: Post;
};

const PostPage: NextPage<PostPageProps> = ({ post }) => {
  const router = useRouter();

  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content
      </p>
    </div>
  );
};

export const getStaticPaths: GetStaticPaths = async () => {
  // ここで API などを利用して、事前に生成するパスの一覧を取得します。
  const response = await fetch("https://api.example.com/posts");
  const posts: Post[] = await response.json();

  const paths = posts.map((post) => ({
    params: { id: post.id },
  }));

  return {
    paths,
    fallback: true,
  };
};

export const getStaticProps: GetStaticProps<PostPageProps> = async ({ params }) => {
  if (!params || typeof params.id !== "string") {
    return {
      notFound: true,
    };
  }

  // ここで API などを利用して、パスごとの静的プロパティを取得します。
  const response = await fetch(`https://api.example.com/posts/${params.id}`);
  const post: Post = await response.json();

  return {
    props: { post },
    revalidate: 60, // 60 秒ごとに再生成します。
  };
};

export default PostPage;

この例では、/posts/:id の URL パターンで表示されるページコンポーネント PostPage を定義しています。getStaticPaths 関数で事前に生成するパスの一覧を取得し、getStaticProps 関数でパスごとの静的プロパティを取得しています。

ページコンポーネント内では、useRouter フックを使って URL パラメータを取得し、表示するデータを動的に切り替えています。

このように、Next.js の Dynamic Routes 機能を使うと、同じページコンポーネントで異なるデータを表示することができ、効率的に開発を進めることができます。また、TypeScript を利用することで、型安全性が向上し、コードの品質も向上します。

Next.js を学ぶ一覧へ