Next.jsでURLパラメータを受け取る際に初回レンダリングがundefinedになる

Next.jsのpage内でURLパラメータを受け取ろうとしたところ、初回レンダリング時にパラメータがundefinedになってしまった。

// pages/test.tsx
import { useRouter } from 'next/router'
import React from 'react'

const Test = () => {
  const router = useRouter()
  const { some } = router.query

  console.log(some)

  return <p>hello</p>
}

export default Test

http://localhost:3000/test?some=world にアクセスしてconsoleを確認すると、初回レンダリング時はsomeがundefinedとなり、2回目のレンダリングでworldが出力される。

routerにはisReadyプロパティが用意されており、これを用いることでURLパラメータがundefinedになるレンダリングを回避できた。

import { useRouter } from 'next/router'
import React from 'react'

const Test = () => {
  const router = useRouter()
  const { some } = router.query

  if (!router.isReady) {
    return null
  }
  console.log(some)

  return <p>hello</p>
}

export default Test

参考

• router.query returns undefined parameter on first render in Next.js · Discussion #11484 · vercel/next.js
• Routing: Dynamic Routes | Next.js