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のフォローしていただけると大変喜びます😊

今流行りのmastodon（マストドン）を始めてみましたよ

非中央集権型のSNSとして鮮烈な衝撃をインターネット界に与えているmastodon（マストドン）。 ただのTwitterクローンではない。これは新しい波が来るのではないかと感じております。

そもそも非中央集権型ってなにさ

詳しくない人にかんたんに説明すると、運営組織が無い。って感じですかね。 最近ますます盛り上がって来ている、Bitcoinなんかも非中央集権型。銀行がない通貨ですね。

ちょっと詳しく知りたい人はこの辺が詳しそう。

japanese.engadget.com

なぜ非中央集権型なのか

一言で言うと、インターネットって自由なもんでしょと私は思うからです。 制限と制約はあれども柵はない。そんな世界が楽しくて今でもインターネットに関わる仕事をしています。

便利でビジネスチャンスが多く落ちてるインターネット。 だけど無法地帯でカオスなインターネット。 そんな世界が好きな人。多分僕だけではないはず。

通貨の取引だって、発言だって、議論だってインターネットの中なら自由に交わしていいんじゃないかな。と思ってしまっていますｗ

なんかインスタンスとかいっぱいあってわからん

僕もわかりません。だってインターネットだもの。 どこかの鯖が攻撃されてダウンして復活しなくなったってインターネットだもの。

LINE を騙ったスパムを見てウマイのかヘタなのかわからなかった… #スパム気をつけましょう

こんなメールが届いた。文章おかしかったので「ん？」と思ったらスパムでした。

メールからURLを開く時には気をつけている事

当たり前の事ですが、最低限これぐらいは確認しますよねって内容

• メールアドレスの送り主アドレス
• リンクのURL
• 文章の内容

さて、今回のメールではどこがおかしかったのでしょうか…