NextJS迁移后：如何覆盖自动设置的html lang标签值？

针对你遇到的NextJS自动将<html>标签lang属性设为se/no，而需要改为sv/nb的问题，有两种可行方案：

方案一：保留现有locale配置，手动同步lang属性 #

不需要修改现有se/no的locale设置，通过服务端渲染和客户端监听来确保lang属性始终为目标值：

1. 服务端渲染时设置正确lang（修改_document.tsx） #

在服务端获取当前locale，映射为对应的语言代码后传入<Html>标签：

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

class MyDocument extends Document {
  static async getServerSideProps(ctx) {
    const originalProps = await Document.getServerSideProps(ctx);
    // 定义locale到标准语言代码的映射
    const localeLangMap = {
      se: 'sv',
      no: 'nb',
      default: 'sv' // 设为你的默认语言
    };
    const currentLang = localeLangMap[ctx.locale || 'default'];
    return { ...originalProps, lang: currentLang };
  }

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

export default MyDocument;

2. 客户端路由切换时更新lang（修改_app.tsx） #

监听路由locale变化，手动更新<html>的lang属性，覆盖NextJS的自动设置：

import { useRouter } from 'next/router';
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const localeLangMap = {
    se: 'sv',
    no: 'nb',
    default: 'sv'
  };

  useEffect(() => {
    const targetLang = localeLangMap[router.locale];
    if (targetLang) {
      document.documentElement.lang = targetLang;
    }
  }, [router.locale]);

  return <Component {...pageProps} />;
}

export default MyApp;

优点：无需调整现有路由和locale配置，快速生效；缺点：需维护locale与语言代码的映射关系，客户端切换路由时可能存在极短的属性更新延迟（用户基本无感知）。

方案二：修改locale为标准语言代码，适配路由映射 #

将locale改为sv/nb，通过NextJS的locale别名功能保留原/se//no的路由路径，同时让NextJS自动设置正确的lang属性：

1. 调整NextJS和next-18next配置 #

• 修改next.config.js，添加locale别名映射：

module.exports = {
  i18n: {
    locales: ['default', 'sv', 'nb'],
    defaultLocale: 'default',
    localeDetection: false,
    // 配置别名，让/se路径对应sv locale，/no对应nb locale
    localeAliases: {
      se: 'sv',
      no: 'nb'
    }
  }
};

• 修改next-18next.config.js的locales配置：

module.exports = {
  debug: false,
  i18n: {
    defaultLocale: 'default',
    locales: ['default', 'sv', 'nb'],
  },
  localePath: path.resolve('./public/locales'),
  localeDetection: false,
  reloadOnPrerender: process.env.NODE_ENV === 'development',
};

2. 调整翻译文件目录 #

将原public/locales/se重命名为public/locales/sv，public/locales/no重命名为public/locales/nb，确保翻译文件与新locale对应。

优点：完全符合NextJS i18n规范，自动处理lang属性，无需额外客户端逻辑；缺点：需要调整翻译文件结构，配置路由别名，适合长期维护的项目。

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