👺
【Next.js】dynamic routingで、paramsがundefinedになる問題解決方法
クエリが取得できない
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になってしまうのを回避できます。
また、ほかに何かいい実装方法を知っている方がいれば、教えていただけますと幸いです。
参考にしたサイト
Discussion