[Next.js] クエリーパラメータ(router.query)がundefinedになる

今回は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で状態増やすよりシンプルになります。

参考ページ


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です