Javascript 如何在Next.js中使用查询字符串参数进行路由？

我有一个像

bar？id=foo

如果我通过

router.push（'bar？id=foo'）

路由到这个位置，一切正常

但是，如果我在浏览器中直接转到路由，则查询字符串不会被传递

const BarComponent = ()=>{
    console.log(useRouter())
}

这个输出

ServerRouter {
  route: '/bar',
  pathname: '/bar',
  query: {},
  asPath: '/bar',
  basePath: '',
  events: undefined,
  isFallback: false,
  locale: undefined,
  isReady: false,
  locales: undefined,
  defaultLocale: undefined,
  domainLocales: undefined,
  isPreview: false,
  isLocaleDomain: false
}

---

这是终端上从服务器获得的输出，并显示其默认值（

{}

）。在客户端上，您应该看到两个控制台日志：第一个是空查询对象（来自SSR），第二个是查询字符串

useRouter（）

是一个React钩子，因此它只在客户端上运行/更新

如果希望访问服务器端的查询字符串，则需要使用

getServerSideProps

并通过上下文对象中的

query

参数访问它

导出异步函数getServerSideProps（{query}）{
console.log（query）/`{id:'foo'}`
//...
}

我猜这是一个新手问题：（这是一个有效的问题，而且常常会产生混乱。