如何在 Next.js 中的 html 标签中添加 lang 属性？

Question

After running some performance check on my Next.js portfolio site I noticed that the main index.html is missing a lang attribute - which gets returned as a deduction from the accessibility score.在我的 Next.js 投资组合站点上运行了一些性能检查后，我注意到主index.html缺少一个lang属性 - 它作为可访问性分数的扣除返回。

I can add the locale by using the i18n setup to next.config.js , but those features are incompatible with next export - the site is statically generated.我可以通过将 i18n 设置添加到next.config.js来添加语言环境，但这些功能与next export不兼容 - 该站点是静态生成的。

Error: i18n support is not compatible with next export. See here for more info on deploying: https://nextjs.org/docs/deployment

Are there any other ways to add the lang attribute?还有其他方法可以添加lang属性吗？

Answer 1

You can add the lang attribute to the <Html> tag in your custom _document .您可以将lang属性添加到自定义_document中的<Html>标记。

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Answer 2

As alternative to @juliomalves answer, next.config.js file can also be used to define lang.作为@juliomalves 答案的替代方案，next.config.js 文件也可用于定义语言。

create a file called "next.config.js" in the root of your project with the below,使用以下内容在项目的根目录中创建一个名为“next.config.js”的文件，

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

ref: https://nextjs.org/docs/api-reference/next.config.js/introduction参考： https://nextjs.org/docs/api-reference/next.config.js/introduction

如何在 Next.js 中的 html 标签中添加 lang 属性？

问题描述

2 个解决方案

解决方案1
7 已采纳 2021-03-21 21:23:42

解决方案2
0 2022-06-14 20:21:14

如何在 Next.js 中的 html 标签中添加 lang 属性？

问题描述

2 个解决方案

解决方案1 7 已采纳 2021-03-21 21:23:42

解决方案2 0 2022-06-14 20:21:14

解决方案1
7 已采纳 2021-03-21 21:23:42

解决方案2
0 2022-06-14 20:21:14