🍵

Next.js useRouterで、query string を取得する

2022/09/18に公開

概要:

Next.js、FCでquery string を取得する時に難航したのでメモです

  • 取得値が undefinedに表示されたので。対策を探しました。

構成

  • next.js 12

関連


参考のコード

  • /test?id=123 みたいなURLで。取得する場合
  • useEffect を使う
  • !router.isReady を使う
  • useEffect の変数(queryParamas, router) を比較する。

上記で、なんとか取得できました。

test.ts
import { useRouter } from "next/router";

  const router = useRouter();
  const queryParamas = router.query;

function Sample() {
  useEffect(() => {
    if (!router.isReady) return;
    console.log("#init", queryParamas.id);
  }, [queryParamas, router]);
 }

Discussion

ログインするとコメントできます