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

概要:

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

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

---

構成

• next.js 12

---

関連

• https://zenn.dev/kiyokiyoabc/articles/d3a8464367094a

---

参考のコード

• /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]);
 }