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

やりたいこと

Next.js App Router でクエリパラメーターを文字列形式ですべて取得したい
※ 使用している Next.js のバージョンは14系（App Router） です

Server Component の場合

Server Component の場合、page.tsx の Props で searchParams を受け取ることができる

searchParams は Plain Object の形式なので toString で文字列に変換すると、ブラウザのアドレスバーにURLとして記載されているクエリパラメーターを文字列形式ですべて取得できる

app / page.tsx

import { ReadonlyURLSearchParams } from “next/navigation”

type Props = {
  params: { slug: string };
  searchParams: ReadonlyURLSearchParams
};

export default async function SCSample(props: Props) {
  const { params, searchParams } = props;

  // ?page=1 でアクセスすると { page: '1' } を取得できる
  console.log("searchParams", searchParams);

  const allQueryParameters = searchParams.toString();

  // URLSearchParams を使用することで page=1 の文字列を取得できる
  console.log("allQueryParameters", allQueryParameters);

  return <div>クエリパラメータ {allQueryParameters}</div>
}

Client Component の場合

Client Component の場合、next/navigation から参照できる useSearchParams を使用することができる。従来は useRouter の router.query で取得していたが、App Router から useSearchParams を使用してクエリパラメータを取得するように仕様が変更した。useSearchParams の返却値を toString で文字列に変換することで、ブラウザのアドレスバーにURLとして記載されているクエリパラメーターを文字列形式ですべて取得することができる

"use client"

import { useRouter, useSearchParams } from "next/navigation";

export const CCSample = () => {
  const searchParams = useSearchParams();

  const allQueryParameters = searchParams.toString();

  // ?page=1 でアクセスすると page=1 の文字列を取得できる
  console.log("allQueryParameters", allQueryParameters);

  return <div>クエリパラメータ {allQueryParameters}</div>
}