router.queryがundefinedになる
Next.jsのはなし
router.queryがundefinedになる
以下のコードだと、GETリクエストが2回走る
1回目はidがundefined
2回目はURLの[id]のidがセットされる
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 ({}).
export default function Page() {
const router = useRouter()
const { id } = router.query
const { data } = useSWR(/api/data/${id}) // GET req
return <div>{JSON.stringfy(data)}</div>
}
router.isReadyを使って制御する
code:ts
const { query, isReady } = useRouter()
if (!isReady) {
return <Loading />
}
// read query
Whether the router fields are updated client-side and ready for use. Should only be used inside of useEffect methods and not for conditionally rendering on the server.
isReadyは、クライアント側で使用できる状態になっているかどうか
useEffect内で使う分にはいいけど、サーバーレンダリングでは使えんぞ
書き換えた例
code:ts
export default function Page() {
const { query, isReady } = useRouter()
useEffect(() => {
if (!isReady) return
;(async () => {
setData(await fetchData(id))
})()
if (!isReady) return null
return <div>{JSON.stringfy(data)}</div>
}