今回はrouter.query.<クエリ名>がundefinedになったときのクライアント側・サーバーサイド側での対策方法をまとめます。
目次
クライアント側での対処法
以下のように、useEffectでrouter.queryに値が入ったタイミングなら、正常にクエリーパラメータを取得できる。
router.isReadyでrouterがクライアント側で使用可能かどうかが確認できる。使用できる状態になったらrouter.query[クエリ名]で値を取得する。
https://nextjs.org/docs/api-reference/next/router
import { useRouter } from 'next/router'
import React, { useEffect, useState } from 'react'
const TestPage = () => {
const router = useRouter()
const [queryParam, setQueryParam] = useState<string>('')
useEffect(() => {
if (!router.isReady) {
return
}
setQueryParam(router.query["queryParam"])
}, [router.query])
...
}これだとサーバーサイドでのPre-renderingで値が使えない…
useEffectを使うとクライアント側の処理になるので、サーバーサイドで行うpre-renderingにクエリーパラメータが使えません。
pre-renderingでもクエリーパラメータを使いたい場合は、getServerSidePropsでサーバーサイド上でクエリーパラメータを取得して、PropsとしてPageコンポーネントに渡してあげるという方法があります。
import { useRouter } from 'next/router'
import { GetServerSidePropsContext, GetServerSidePropsResult } from 'next'
import React from 'react'
type Props = {
queryParam: string
}
export const getServerSideProps = (
context: GetServerSidePropsContext
): GetServerSidePropsResult<Props> => {
// サーバーサイドでクエリーパラメータを取得
const queryParam = context.query.queryParam ?? '値が入ってない'
// ページコンポーネントにPropsとしてクエリーパラメータを渡す
return {
props: {
queryParam: queryParam
}
}
}
const TestPage: React.FC<Props> = ({
queryParam
}) => {
// クエリーパラメータはPropsで渡される
...
}
こっちの方がHooksで状態増やすよりシンプルになります。