Next.js国际化路由按语言加载CSS的Vercel部署问题解决

两种写法在Vercel生产环境失效的本质是Next.js生产构建的静态扫描逻辑：

• 写在条件判断里的require()引入全局CSS时，webpack会在构建阶段扫描到所有被引用的CSS文件，直接忽略条件判断逻辑，把两个CSS全部抽取合并到全局样式chunk中，部署后两个样式同时生效产生冲突。开发环境webpack走增量热更新逻辑，不会做全量chunk合并，所以本地能正常运行。
• 用next/head写相对路径引入样式的写法本身有误：<link>的href属性是站点对外的访问路径，不是项目源码的文件相对路径，构建后源码目录结构不会保留，该路径既无法正确映射到资源，还会被构建器识别为模块依赖重复打包。

方案1：静态资源托管方式加载 #

1. 在项目根目录新建public/css文件夹，把style.min.css和style-rtl.min.css移动到该目录下。public是Next.js约定的静态资源目录，目录内的文件会被原样输出到部署产物，不会经过webpack的CSS合并、压缩流程，不会出现打包冲突。
2. 修改_app.js代码如下：

import { appWithTranslation } from 'next-i18next';
import { useRouter } from 'next/router';
import Head from 'next/head';
import Layout from '../components/Layout'; // 替换为你项目中Layout组件的实际导入路径

function MyApp({ Component, pageProps }) {
  const { locale } = useRouter();
  const styleHref = locale === 'ar' ? '/css/style-rtl.min.css' : '/css/style.min.css';

  return (
    <>
      <Head>
        {/* 加key属性保证切换语言时旧样式标签被正确替换，避免样式残留 */}
        <link rel="stylesheet" href={styleHref} key={styleHref} />
      </Head>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  )
}

export default appWithTranslation(MyApp);

方案2：动态import拆分独立样式chunk #

如果不想把CSS放到public目录，可以通过动态import加webpack魔法注释，强制让构建器把两个CSS拆分为独立chunk，按需加载：

1. 在styles目录下新建两个入口文件：
   • styles/load-ltr.js内容：

   import './css/style.min.css';
   

   • styles/load-rtl.js内容：

   import './css/style-rtl.min.css';
   

2. 修改_app.js代码如下：

import { appWithTranslation } from 'next-i18next';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Layout from '../components/Layout'; // 替换为你项目中Layout组件的实际导入路径

function MyApp({ Component, pageProps }) {
  const { locale } = useRouter();
  const [styleReady, setStyleReady] = useState(false);

  useEffect(() => {
    const loadMatchedStyle = async () => {
      setStyleReady(false);
      if (locale === 'ar') {
        await import(/* webpackChunkName: "rtl-style" */ '../styles/load-rtl');
      } else {
        await import(/* webpackChunkName: "ltr-style" */ '../styles/load-ltr');
      }
      setStyleReady(true);
    };
    loadMatchedStyle();
  }, [locale]);

  // 样式加载完成前不渲染内容，避免无样式内容闪烁
  if (!styleReady) return null;

  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

export default appWithTranslation(MyApp);

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