NextJS如何在getServerSideProps中获取动态路由query参数

getServerSideProps本身会接收一个上下文对象作为默认入参，路由动态参数直接存储在该对象的query属性中，无需调用客户端Hook获取。

你的动态路由文件名为[id].tsx，因此路由参数的键名为id，修改后的代码如下：

export async function getServerSideProps(context) {
  // 提取路由参数，转换为字符串避免多匹配场景下返回数组的问题
  const queryCocktailName = String(context.query.id)
  const res = await fetch(
    `https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${queryCocktailName}`
  )
  const data = await res.json()
  return {
    props: { data },
  }
}

补充说明 #

• 上下文对象仅在getServerSideProps运行的服务端环境中生效，除query外还包含请求响应对象req/res、请求路径resolvedUrl等服务端请求相关属性。
• 若后续使用多级动态路由，可直接从context.query中提取对应文件名的参数，例如路由文件[category]/[keyword].tsx可分别获取context.query.category和context.query.keyword两个参数。

内容的提问来源于stack exchange，提问作者Denis