next/router isReadyがtrueになってから描画させる

やりたかったこと

• router.queryでクエリパラメータを取得したい
• ↑は初期ロード時に値がundefinedになる
• isReadyの値がtrueになってから取得・描画すれば解決する

生じた問題

router.isReadyを直接参照する以下の例でエラーが出る。

Warning: Expected server HTML to contain a matching <div> in <div>.

ダメな例

export const Hoge = () => {
  const router = useRouter()
  const { data } = router.query

  return <>{router.isReady && <Inner data={data} />}</>
}

解決策

/hoge?data=abcにアクセスするとして、パラメータを取得してからレンダリングさせたい場合、以下のように実装する必要がある。

export const Hoge = () => {
  const router = useRouter()
  const { data } = router.query

  const [display, setDisplay] = useState(false)
  useEffect(() => {
    if (router.isReady) {
      setDisplay(true)
    }
  }, [router.isReady])

  return <>{display && <Inner data={data} />}</>
}