0

我正在开发一个多语言静态构建（下一个导出）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>
    )
  }
}
4

2 回答 2

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} />;
 };
于 2021-11-12T00:18:46.250 回答
0

从 Next.js v10 开始，如果你使用内置的i18n 路由，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 网站管理员文档中了解更多信息 。

于 2022-01-15T08:45:37.133 回答