如何在getInitialProps中获取查询参数以更新Meta内容？

1. 动态获取路由查询参数 #

在Next.js的_app.js中，getInitialProps的上下文参数（ctx）包含路由的query对象，你需要从这里动态提取countryCode，替代硬编码的固定值。

2. 修正后的代码 #

function StartApp({ Component, pageProps, initialAsideLeftHandler }) {
  return <>
    <Provider store={store}>
      <Head>
        <title>{initialAsideLeftHandler[2].values}</title>
        <meta name="title" content={initialAsideLeftHandler[2].values} />
        <meta name="description" content={initialAsideLeftHandler[1].values} />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header/>
      <Component {...pageProps} />
      <Footer />
    </Provider>
  </>
}

StartApp.getInitialProps = async (ctx) => {
  // 从上下文query中提取参数，设置默认值避免无参数时报错
  const { countryCode = "in", slug = "home" } = ctx.query;
  
  let parameter = {
    countryCode,
    slug,
  };
  
  let data = await getMetaContent(parameter);
   
  return { initialAsideLeftHandler: data };
}

3. 匹配路由配置 #

如果你的访问路径是localhost:3000/in，需要在pages目录下创建动态路由文件[countryCode].js，这样Next.js才能将路径中的in识别为countryCode参数，注入到query对象中供getInitialProps使用。

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