设置文档语言

为无障碍性和 SEO 声明页面语言

问题

网页显示为法语，但 HTML 文档本身未标记为法语（例如，<html lang="en">）。未声明语言会导致屏幕阅读器尝试使用英语发音来朗读法语内容。这不仅阻止了浏览器提供自动翻译功能，还会影响搜索引擎的索引。

解决方案

在根布局组件中从 URL 中读取 lang 参数。将此 lang 参数传递给 <html> 元素的 lang 属性。这将明确向浏览器和辅助技术声明整个文档的语言。

步骤

1. 在根布局中访问 `lang` 参数

在 Next.js 的 App Router 中，动态段（如 [lang]）内的 layout.tsx 文件会自动接收该段的值作为 params 属性。

2. 在 `<html>` 元素上设置 `lang` 属性

修改您的 app/[lang]/layout.tsx 文件以接受 params 属性，并将其 lang 属性应用到 <html> 标签的 lang 属性。

// app/[lang]/layout.tsx

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

这确保了对 /fr/about 的请求会生成以 <html lang="fr"> 开头的页面。此简单更改能够正确告知屏幕阅读器、搜索引擎和浏览器内容所使用的语言。