如何在NextJS 13服务端根布局中动态修改html lang属性

在Next.js 13中，根服务端布局可以直接通过params props获取动态路由段的值，以此动态设置html的lang属性，具体实现步骤如下：

1. 修改根布局组件 #

更新你的layout.tsx，接收params参数并根据其动态设置语言：

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang?: string };
}) {
  // 默认语言为en，当路由中存在lang参数时使用该值
  const defaultLang = "en";
  // 可选：限制支持的语言列表，避免非法值
  const supportedLangs = ["en", "fr"];
  
  const currentLang = params.lang 
    ? supportedLangs.includes(params.lang) ? params.lang : defaultLang 
    : defaultLang;

  return (
    <html lang={currentLang}>
      <body>{children}</body>
    </html>
  );
}

2. 原理说明 #

• 根布局作为服务端组件，能够直接访问路由的params对象，其中包含[lang]动态路由段的值（例如访问/fr/blog时，params.lang为"fr"）。
• 当访问非博客路由（如/home）时，params中不存在lang属性，此时会回退到默认语言"en"。
• 加入supportedLangs验证是为了防止用户访问非法语言路径（如/xx/blog）时，html的lang属性被设置为无效值。

内容的提问来源于stack exchange，提问作者Derrick Omanwa