向 Next.js 网站添加 lang 属性

有时，当您在网站上运行 Lighthouse 性能检查时，您可能会遇到以下问题：

<html> element does not have a [lang] attribute

幸运的是，无论您使用的是 Next.js 还是普通的 HTML，这个问题都很容易解决！

我为什么需要这个？

这是为了方便使用！屏幕阅读器通常针对其支持的每种语言使用不同的声音库。它们可以轻松地在这些声音库之间切换，但前提是网页指定了要使用的语言。

通常在普通的 Next.js 网站中，部署的页面仅提供一个<html>包装好的网站，没有附加任何语言属性。

如果您正在编写一个纯 HTML 网站（或使用其他允许您更新已发布的 HTML 文件的库），则只需lang="en"在输出的 HTML 中添加一个即可，如下所示：

<html lang="en">

使用 Next.js 会稍微复杂一些，但幸运的是并不太难！

创建自定义文档

pages/在你的目录（或你放置页面组件的任何位置）中，创建一个名为的文件_document.js。这将覆盖 Next.js 网站自带的默认文档。不过不用担心，我们不会破坏任何东西！

在该文件内添加以下内容：

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

export default function Document() {
  return (
    <Html lang="en"> {/* Add whichever language you want here */}
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

搞定！别忘了删除Html、Head、Main和NextScript组件，因为它们是网站正确渲染所必需的。下次运行性能和可访问性审核时，你的语言设置应该就清晰明了了！

文章来源：https://dev.to/cassidoo/adding-a-lang-attribute-to-your-nextjs-site-22db