Next.JS App Router でURLクエリー文字列を取得するのはクライアントコンポーネントとpage.tsxで出来る

なにか検索していますね。クエリー文字列をきっと使っているはずです

おつかれさまです！のぶじゃすです。

URLクエリー文字列を取得する方法

https://example.com/anypage?search=abcdefg の様なURLのクエリー文字列をNext.jsのApp Routerを用いて取得する方法について解説します。

Next.JS App Router ではクエリー文字列を取得する2つの主な方法があります。

1. クライアントコンポーネントで useSearchParams を使う方法
2. page.tsx で searchParams を参照する方法

Next.jsのApp Router導入後、ClientとServerの両方を考慮してコーディングする必要が出てきました。 書き味が少し違うので何が何に対比していて、どこに制限があるのかを意識しないと素早く書けないです。 この辺りが頭に入っているのといないのでは、設計時に見通せる世界が広がります。

1. クライアントコンポーネントで useSearchParams を使う方法

"use client";
import { useSearchParams } from "next/navigation";

export const PresentationSearchPanel = () => {
  const sParams = useSearchParams();
  const search = sParams.get("search");
  return <div>{search}</div>;
};

詳細についてはNext.js公式ドキュメントを参照してください。 nextjs.org

2. page.tsxで searchParams を参照する方法

export default async function AnyPage({
  searchParams,
}: {
  searchParams: z.infer<typeof formSchema>;
}) {
  return <div>{searchParams.search}</div>
});

詳細についてはNext.js公式ドキュメントを参照してください。 nextjs.org

検証環境

package.json 抜粋

"next": "^13.5.2",

next.config.mjs 抜粋

const config = {
  reactStrictMode: true,
  experimental: {
    serverActions: true,
  },
};

アクセスありがとうございます🙇‍♂️

ここまで読んでいただき誠にありがとうございました。もしこの記事が役に立ったらはてブや、Twitterのフォローしていただけると大変喜びます😊