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

参考


Related #next.js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

Next.js 11

手軽にアップグレードできた

VercelのNode.jsバージョンを変更する

Settings => General => Node.js Version から変更できる

FigmaでSVG Octocatを作る その3

アウトライン化大事

Vercelで指定のブランチのみデプロイを実行する

Ignored Build Stepを設定した