如何在静态导出的Next.js项目中为HTML标签添加lang属性？
2026-4-29
解决静态导出Next.js站点添加HTML lang属性的问题
既然next export和官方的i18n配置不兼容，这里有几个靠谱的方法能帮你给静态作品集站点加上lang属性，修复可访问性评分的扣分问题：
方法1：自定义_document.js（首推）
这是最直接的方案，因为Next.js的自定义Document允许你直接修改根HTML标签的属性，而且完全兼容静态导出。
步骤很简单：
- 在项目的
pages目录下创建（如果没有的话）_document.js文件 - 写入下面的代码：
import Document, { Html, Head, Main, NextScript } from 'next/document'; class MyDocument extends Document { render() { // 把这里的"en"换成你需要的语言代码，比如"zh-CN" return ( <Html lang="en"> <Head /> <body> <Main /> <NextScript /> </body> </Html> ); } } export default MyDocument;
重新执行next export后，生成的所有静态HTML文件的根标签都会带上lang属性，完美解决问题。
方法2：在_app.js中动态设置
如果你的站点需要根据不同页面设置不同的lang值（比如简单的多语言静态站），可以在全局的_app.js里用useEffect动态修改：
import { useEffect } from 'react'; import '../styles/globals.css'; function MyApp({ Component, pageProps }) { useEffect(() => { // 这里可以根据路由或pageProps传递的值动态设置lang document.documentElement.lang = pageProps.lang || 'en'; }, [pageProps.lang]); return <Component {...pageProps} />; } export default MyApp;
这种方式适合需要灵活切换语言的场景，页面加载时会自动给HTML标签加上对应的lang属性。
方法3：手动配置多语言静态页面（适合多语言站点）
如果你的静态站点是多语言的，又不想用官方i18n，可以通过next.config.js的exportPathMap手动生成不同语言的页面，再给每个页面设置对应的lang：
- 先在
next.config.js里配置导出路径：
module.exports = { exportPathMap: async function () { return { '/': { page: '/' }, '/es': { page: '/', query: { lang: 'es' } }, '/zh': { page: '/', query: { lang: 'zh-CN' } } }; } };
- 在你的页面组件（比如
index.js）里接收lang参数并设置：
import { useEffect } from 'react'; export default function Home({ lang }) { useEffect(() => { document.documentElement.lang = lang || 'en'; }, [lang]); // 页面内容 return <div>你的作品集内容</div>; } export async function getStaticProps({ query }) { return { props: { lang: query.lang || 'en' } }; }
这样执行next export后，会生成/、/es、/zh三个静态页面，每个页面的HTML标签都会带上对应的lang属性。
总的来说，方法1最适合你的单语言静态作品集站点，操作简单，一步到位就能修复可访问性评分的问题。
内容的提问来源于stack exchange，提问作者alanionita
