有什么方法可以在 Next.js 自定义文档中获取 url 参数？答案

【问题标题】：Any way to get url params in Next.js custom document?有什么方法可以在 Next.js 自定义文档中获取 url 参数？
【发布时间】：2021-12-22 12:30:05
【问题描述】：

我正在开发一个多语言静态构建（下一个导出）Next.js 站点。我不能使用下一个国际化，所以我不得不一起破解一个解决方案，主要基于这个nextjs-18n-static-page-starter

我的页面结构如下：

pages
 ┣ [lang]
 ┃ ┣ category
 ┃ ┃ ┣ [slug].js
 ┃ ┃ ┗ index.js
 ┃ ┗ index.js
 ┣ _app.js
 ┣ _document.js
 ┗ index.js

我想在自定义文档中设置 html lang 属性。有什么方法可以在文档级别从 url 动态拉取它？

我有这个 hacky 解决方案，但是当用户在应用程序中更改他们的语言时它不会更新（它会正确重定向到新的 url）：

export default class MyDocument extends Document {
  render() {
    const queryLang = this?.props?.__NEXT_DATA__?.query?.lang;
    const lang = ( queryLang === null || queryLang === undefined ) ? DEFAULT_LANG : queryLang;

    return (
      <Html lang={lang}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

【问题讨论】：

_document 仅在服务器上运行，在客户端所做的任何更改都不会被拾取。您可能需要在 _app 中进行一些 DOM 操作。

标签： next.js internationalization i18next nextjs-dynamic-routing

【解决方案1】：

在应用程序中设置它就可以了。这是我最终得到的代码（感谢@juliomalves 为我指明了正确的方向）...

const App = function ({ Component, pageProps }) {
    i18next.changeLanguage(pageProps.language);

    useEffect(() => {
        const lang = ( pageProps.language === null || 
          pageProps.language === undefined ) 
          ? DEFAULT_LANG 
          : pageProps.language;
        document.documentElement.lang = lang;
     }, [pageProps.language]);
    return <Component {...pageProps} />;
 };

【讨论】：

【解决方案2】：

从 Next.js v10 开始，如果你使用内置的i18n routing，Next 会自动设置文档的lang 属性。

如果您的语言是en-US，您只需在next.config.js 文件中添加以下内容

module.exports = {
  i18n: {
    locales: ["en-US"],
    defaultLocale: "en-US",
  },
  ...
}

来自文档：

搜索引擎优化

因为 Next.js 知道用户正在访问什么语言，所以它将自动将lang 属性添加到<html> 标记中。

Next.js 不了解页面的变体，因此您可以自行添加 hreflang 元标记使用next/head。您可以了解更多关于 hreflang 在Google Webmasters documentation。

【讨论】：