👺

【Next.js】dynamic routingで、paramsがundefinedになる問題解決方法

1 min read

クエリが取得できない

Nextのメリットの一つとしてdynamic routingが挙げられると思います。しかし、paramを取得する際に一点気になる部分が存在します。

Pages that are statically optimized by Automatic Static Optimization will be hydrated without their route parameters provided, i.e query will be an empty object ({}).

After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object.

パラメーターが渡される前にページが読み込まれる可能性があり、その際はobjectの中身は空になるそうです。また、クエリパラメータがセットされたら、アプリケーションのアップデートを引き起こします。

つまり、最初のレンダリングではクエリがセットされずundefinedになり、その後に時間差で値がセットされる可能性があります。

考えられる解決策

そのため、下記のようにクエリがセットされたことを検知するコードを書かなければいけません。

  const router = useRouter()
  const [Query, setQuery] = useState<string>()

  useEffect(() => {
    // クエリがセットされたことを検知
    if (router.asPath !== router.route) {
      const query = router.query.~~~~ // それぞれに応じた値
      setQuery(query);
    }
  }, [router]);
  
  // クエリに応じて処理
  useEffect(() => {
    if(Query){
      // クエリを用いてデータを取得するような処理をここに記載
    }
  }, [Query]);
  

これでundefinedになってしまうのを回避できます。

また、ほかに何かいい実装方法を知っている方がいれば、教えていただけますと幸いです。

参考にしたサイト

https://nextjs.org/docs/routing/dynamic-routes#caveats

https://qiita.com/hourglasshoro/items/f105e31149d103cf0597
GitHubで編集を提案

Discussion

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