Next.jsでURLのパラメーターを取得したいっ！

2024年1月5日

使ってるNext.jsのバージョンは14系(App Router)です。

やりたいことの内容としては下記のようなURLの場合の?nanika=1の値を取りたいって話ですね。

https://example.com/user?nanika=1

ちょいとググってみた感じだとuseSearchParamsで取れるらしい。

useSearchParams

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

export default function User() {
  const searchParams = useSearchParams();
  const nanika = searchParams.get("nanika");

  return (
    <p>{nanika}</p>
  );
}

ってな感じで、取得できました👍✨

参考

【App Router】Next.js13でURLのクエリパラメーターを取得する方法
【React】Next.js13以降でURLのクエリパラメーターを取得する方法 #React – Qiita

関連記事

  1. Reactでdefault exportではないコンポーネントをlazy importしたいっ！ タイトルの通りですが、 export default function Hoge() { return ( <h1>ほげほげ</h1> );...
  2. useReducerでコンポーネントに渡すpropsをすっきりさせたいっ！[React/typescript] 機能追加を続けるとuseStateが乱立というかどんどん増えて行ってしまうので、useReducerでまとめて処理したいと思います。 useState import { useState } from 'react'; […]...
  3. React(TypeScript)でコンポーネントのtypeを別のコンポーネントで使いたいっ！[ComponentProps] とあるコンポーネントのPropsで指定しているtypeを使いまわしたい時にComponentPropsを使うのを忘れそうなのでメモ。 const Hoge: React.FC<{ id: number }> […]...
  4. react-i18nextのuseTranslationをTranslationコンポーネントに書き換えた話 ドキュメントを上から読んでいって、まずは普通に useTranslation(); で実装しようとしました。 (i18nextのinitは別のとこでやってるので省略) useTranslation(); まずは親になるM […]...
Next.jsReact