设置文档语言

为无障碍和 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"> 开头。此简单更改能正确告知屏幕阅读器、搜索引擎和浏览器页面内容所用的语言。