如何在 Next.js (Pages Router) v16 中设置文档语言

问题

网页需要向浏览器、搜索引擎和辅助技术声明其主要语言。如果没有明确的语言声明，这些工具必须猜测内容的语言。屏幕阅读器会默认使用用户的系统语言，当内容语言与系统语言不同时，会导致发音错误。浏览器无法自信地提供翻译功能，因为缺乏源语言信息。搜索引擎难以为正确的语言受众索引页面，从而降低了用户在该语言中搜索时的可发现性。

解决方案

在根 <html> 元素上设置 lang 属性以声明页面的主要语言。在 Next.js 的 Pages Router 中，可以通过创建一个自定义的 Document 组件来包装应用程序的 HTML 结构来实现。lang 属性接受一个标准的语言代码，用于告诉浏览器、辅助技术和搜索引擎内容使用的语言，从而实现正确的发音、适当的翻译功能以及准确的索引。

步骤

1. 创建一个自定义的 document 文件

在你的 pages 目录中创建一个名为 _document.js（或对于 TypeScript，命名为 _document.tsx）的文件。此文件允许你自定义包装应用程序中每个页面的 HTML 文档结构。

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

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

next/document 中的 Html 组件接受一个 lang 属性，该属性设置根 HTML 元素的语言属性。将 "en" 替换为你的内容语言代码。

2. 使用适当的语言代码

语言代码遵循 UTS Locale Identifiers 标准格式：language-region-script，其中区域和脚本是可选的。在大多数情况下，使用两位字母的 ISO 639-1 语言代码。

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

export default function Document() {
  return (
    <Html lang="fr">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

常见示例包括 "en" 表示英语，"es" 表示西班牙语，"fr" 表示法语，"de" 表示德语，以及 "ja" 表示日语。根据需要，你可以包括区域变体，例如 "en-US" 或 "en-GB"。

3. 根据语言环境设置动态语言

如果您的应用程序通过 Next.js 的 i18n 路由支持多种语言环境，可以从路由器上下文中访问当前语言环境，以动态设置语言。

import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
  DocumentInitialProps,
} from "next/document";

export default class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext,
  ): Promise<DocumentInitialProps> {
    const initialProps = await Document.getInitialProps(ctx);
    return initialProps;
  }

  render() {
    return (
      <Html lang={this.props.locale}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

当使用 Next.js 内置的 i18n 配置时，框架会自动提供语言环境并更新 lang 属性。当在 next.config.js 中配置了 i18n 时，locale 属性会在 Document 组件中可用。