Masayan tech blog.

  1. ブログ記事一覧>
  2. 【Next.js】SSR時にRouteオブジェクトのqueryがundefinedになる際の対処法

【Next.js】SSR時にRouteオブジェクトのqueryがundefinedになる際の対処法

公開日

環境

  • windows10
  • DockerDesktop for Win 3.5.x
  • node 16.13.1
  • npm 8.1.2
  • React 17.0.1
  • Next.js 12.0.7
  • VsCode
  • gitbash 2.32.0.1

現象

  • 初回レンダリング時、queryオブジェクトが空になる
    query: {}
  • 上により、router.queryがundefinedになる
  • 結果として、Httpリクエストがapi/posts/undefinedとかになり、リソースが見つからず、404になる

 原因

理由は公式に記述されています。

自動静的最適化によって静的に最適化されたページは、ルートパラメータが提供されないままハイドレーションされます。

ハイドレーションの後、Next.jsはアプリケーションの更新をトリガーにして、クエリオブジェクトにルートパラメータを提供します。

  • 初回レンダリング時はルートパラメータが提供されないため
  • Nextjsでは、アプリケーションの更新があるまで、routerは空のオブジェクトのまま(useEffectはcomponentDidMountのタイミングで実行されますが、こちらはアプリケーションの更新には含まれない)

対処法

  • RouterオブジェクトのisReadyというboolean値を使用する
  • isReady属性は、routerが完全に準備できているかどうかを表すフラグ
  • isReadeyフラグを用いることで、useEffect内でHttpリクエストを送る前に、クラアント側でrouterオブジェクトをキャッチして使用できることを保証するようにする
const router = useRouter()

useEffect(() => {
  if (!router.isReady) {
    return
  }

  axios.get(`/api/posts/${router.query.postId}`).then((res) => {
    const posts = res.data
    setPosts(posts)
  })
}, [router])

以上です

まとめ

いかがでしたでしょうか。本記事では、Next.jsの開発において、SSR時の初回レンダリングでqueryがundefinedになる際の対処法について紹介しています