Zenn
Open3

Next.jsでの動的ルーテイングと、パラメーターの取得について

Next.js
routing
queryparameter
動的ルーティング
ピン留めされたアイテム
まさぴょん🐱まさぴょん🐱

Next.jsでクエリパラメータを送る方法はいくつかあります。以下に、主な手法を説明します。

クエリパラメータの追加

  1. useRouterフックを使用する:
    Next.jsのuseRouterフックを使うことで、クエリパラメータを簡単に追加できます。以下はその基本的な使い方です。

    import { useRouter } from 'next/router';

const MyComponent = () => {
    const router = useRouter();

    const handleClick = () => {
        router.push({
            pathname: '/your-path',
            query: { key: 'value' },
        });
    };

    return <button onClick={handleClick}>Send Query</button>;
};

    このコードでは、ボタンをクリックすると、指定したパスにクエリパラメータを追加して遷移します。

  2. router.replaceを使用する:
    router.replaceを使うことで、現在のURLを変更しつつ、クエリパラメータを更新することもできます。これにより、ブラウザの履歴に新しいエントリを追加せずにURLを変更できます。

    const handleUpdate = () => {
    router.replace({
        pathname: '/your-path',
        query: { ...router.query, newKey: 'newValue' },
    });
};

    ここでは、既存のクエリパラメータを保持しつつ、新しいパラメータを追加しています。

クエリパラメータの取得

クエリパラメータを取得するには、useRouterフックを使用して、router.queryからアクセスできます。

const MyComponent = () => {
    const router = useRouter();
    const { key } = router.query;

    return <div>Query Parameter: {key}</div>;
};

この方法で、URLに含まれるクエリパラメータを簡単に取得できます。

サーバーサイドでのクエリパラメータの取得

サーバーサイドレンダリングを使用する場合、getServerSidePropsを利用してクエリパラメータを取得することも可能です。

export async function getServerSideProps(context) {
    const { query } = context;
    return {
        props: { query }, // クエリパラメータをコンポーネントに渡す
    };
}

この方法では、ページがリクエストされるたびにクエリパラメータを取得できます。

まとめ

Next.jsでは、クエリパラメータを送信するためにuseRouterフックを使用するのが一般的です。router.pushやrouter.replaceを使って、クエリパラメータを追加または更新し、必要に応じてサーバーサイドで取得することもできます。
これにより、ユーザーの操作に応じた動的なURL管理が可能になります。

まさぴょん🐱まさぴょん🐱

Next.js 13 で URL の情報を取得する方法を整理する

URL の情報を取得する "next/navigation" の3つの hook があります。

  1. useSearchParams: クエリパラメータを取得
  2. usePathname: dynamic params を含むパスを取得
  3. useParam: dynamic params を取得

1. useSearchParams

import { useSearchParams } from 'next/navigation';

  const searchParams = useSearchParams()
  console.log(searchParams)

const searchParams = useSearchParams()
const params1 = searchParams.get('params1')

# /demo/hoge?params1=fuga にアクセスした結果

params1=fuga

2. usePathname

import { usePathname } from 'next/navigation';

// 省略

  const pathname = usePathname()
  console.log(pathname)
  
// 省略

# /demo/hoge?params1=fuga にアクセスした結果

/demo/hoge

3. useParams

import { useParams } from 'next/navigation';

// 省略

  // useParams の戻り値はオブジェクト
  const params = useParams()
  console.log("result of useParams: %o", params)
  
// 省略

const params = useParams()
const id = params.id

# /demo/hoge?params1=fuga にアクセスした結果

{id: 'hoge'}

参考・引用

https://qiita.com/RANZU/items/0037cbb04d8716944b0e

https://zenn.dev/yskn_sid25/scraps/586d20b9d76123