reactjs - 如何通过 Next.js 中的状态更新 getServerSideProps 中的 URL？（最新版本）

Question

我通过 getServerSideProps 从 HERE Geocoding API 收到一些数据：

const defaultEndpoint = `https://geocode.search.hereapi.com/v1/geocode?q=${search}&apiKey=${process.env.API_KEY}`

export async function getServerSideProps() {
  const res = await fetch(defaultEndpoint)
  const data = await res.json()
  return { props: { data } }
}

我传递给的这个道具：

const index = ({ data }) => {
  const [search, setSearch] = useState('wimpfener str 40 backnang')
  console.log(data)
  return (
    <div>
      <Haversine />
      <LangLat data={data} />
    </div>
  )
}

export default index

我想将默认端点内的搜索设置为用户在表单中键入的任何内容，默认值应该是“wimpfener str 40 backnang”，我尝试通过 useState 设置。（我知道如何处理用户输入，这个问题只是关于如何更新 API-URL）

这是一个更清晰的 图像：我的代码的图像