Next.jsでクエリパラメータを取得する方法

Next.js React

Next.jsで画面のクエリパラメータを取得する方法

Next.jsで画面のGETパラメータを取得する方法にはいくつかの方法があります。
以下に、useRouterフックを使用する方法と、getServerSidePropsを使用する方法の2つを説明します。

1. useRouterフックを使用する方法

Next.jsのuseRouterフックを使用すると、クライアントサイドでクエリパラメータを取得することができます。

手順

1. useRouterフックをインポートします。
2. router.queryを使用してクエリパラメータを取得します。

実装例
import { useRouter } from 'next/router';

const Page = () => {
  const router = useRouter();
  const { name, age } = router.query;

  return (
    <div>
      <h1>Query Parameters</h1>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

export default Page;

このコードでは、nameとageのクエリパラメータを取得して表示しています。
例えば、URLが
http://localhost:3000/?name=John&age=30
の場合、nameにはJohnが、ageには30が格納されます。

上述していますが、useRouterはクライアントサイドでパラメータを取得できます。
サーバサイドでは取得できないので実装時に注意してください。

2. getServerSidePropsを使用する方法

Next.jsのgetServerSidePropsを使用すると、サーバーサイドでクエリパラメータを取得することができます。
これにより、ページがリクエストされるたびにデータをフェッチすることができます。

手順

1. getServerSideProps関数をエクスポートします。
2. context.queryを使用してクエリパラメータを取得します。

実装例
const Page = ({ name, age }) => {
  return (
    <div>
      <h1>Query Parameters</h1>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

export const getServerSideProps = async (context) => {
  const { name, age } = context.query;

  return {
    props: {
      name: name || null,
      age: age || null,
    },
  };
};

export default Page;

このコードでは、サーバーサイドでクエリパラメータを取得し、コンポーネントのプロパティとして渡しています。
例えば、URLが
http://localhost:3000/?name=John&age=30
の場合、nameにはJohnが、ageには30が格納されます。

3. getStaticPropsを使用する方法

getStaticPropsを使用する場合、クエリパラメータを取得するためにはビルド時にパラメータを知っておく必要があります。
通常、getStaticPropsは動的なクエリパラメータを扱うのには適していませんが、事前に静的に生成する場合には使用できます。

import { useRouter } from 'next/router';

const Page = ({ name, age }) => {
  const router = useRouter();

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

  return (
    <div>
      <h1>Query Parameters</h1>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

export async function getStaticPaths() {
  return {
    paths: [], // 静的に生成するページのパスを指定
    fallback: true, // fallback: true で動的に生成するページも対応
  };
}

export async function getStaticProps(context) {
  const { name, age } = context.params;

  return {
    props: {
      name: name || null,
      age: age || null,
    },
  };
}

export default Page;

このコードでは、getStaticPathsで生成するページのパスを指定し、getStaticPropsでクエリパラメータを取得します。

これらの方法を使って、Next.jsでクエリパラメータを取得できます。