Next.js router.query.id初期レンダリングの時undefinedの問題対策

router.query.id習得後APIサンプル

User詳細のAPIをはaxiosで叩くサンプルだ。問題点としてはブラウザの初期レンダリング時にrouter.query.idがundefinedになってしまい初期値のレスポンスが404なる原因。

[id].ts

import { useEffect, useState } from 'react';
import axios from 'axios';
import { useRouter } from 'next/router';
export const User: React.FC = ({}) => {
  const [userData, setUserData ] = useState([])
  const router = useRouter();
  useEffect(() => {
    const getUserData = async () => {
      const endPoint = `/api/user/${router.query.id}`
      const res = await axios.get(endPoint)
      setUserData(res.data)
    }
    getUserData()
  },[router.query.id])
  console.log(userData)
  return(
    <></>
  )
}
export default User

api通信エラー

対策

対策としては router値が変更時useEffectが実行されrouter.query.idがある時API通信を行う対策

[id].ts

import { useEffect, useState } from 'react';
import axios from 'axios';
import { useRouter } from 'next/router';
export const User: React.FC = ({}) => {
  const [userData, setUserData ] = useState([])
  const router = useRouter();
  useEffect(() => {
    const getUserData = async () => {
      const endPoint = `/api/user/${router.query.id}`
      const res = await axios.get(endPoint)
      setUserData(res.data)
    }
    router.query.id && getUserData()　// 追加
  },[router]) // 追加
  console.log(userData)
  return(
    <></>
  )
}
export default User