環境
- 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になる際の対処法について紹介しています