Next.js如何基于locale变量动态或条件导入对应多语言数据文件

你原有写法行不通的核心原因是：ES6 规范的静态 import 语句只能在模块顶层使用，且导入路径必须是固定的字符串字面量，不支持运行时拼接的动态变量。

有两种成熟的方案可以实现你的需求，改造成本都很低，不需要动你现有的组件逻辑：

方案一：静态预导入（优先推荐，适配性最高） #

这个方案没有异步加载的时序问题，不需要调整现有组件的调用逻辑，完全符合你不想重构的要求。

1. 首先调整你的文件结构，把多语言版本的 AppClassic 放到统一目录下：

src/
└── common/
    └── data/
        └── AppClassic/
            ├── index.js // 统一导出入口
            ├── en.js // 英文内容
            └── de.js // 德文内容

2. 在统一入口 index.js 里预导入所有语言包，做运行时匹配：

import * as en from './en';
import * as de from './de';

const localeContentMap = {
  en,
  de
};

// 对外暴露按语言取内容的方法，默认兜底英文
export const getAppClassicContent = (locale = 'en') => {
  return localeContentMap[locale] || localeContentMap.en;
};

3. 业务组件直接调用即可，和你原来的使用习惯几乎一致：

import { useRouter } from 'next/navigation';
import { getAppClassicContent } from 'common/data/AppClassic';

export default function YourComponent() {
  const { locale } = useRouter();
  // 直接拿到对应语言的keyFeatures，和原来的用法完全兼容
  const { keyFeatures } = getAppClassicContent(locale);

  // 后续正常使用keyFeatures即可
  return <div>{/* 你的原有业务逻辑 */}</div>;
}

方案二：动态导入（适合语言包体积大，不想全量打包的场景） #

如果你的语言包内容很多，全量打包会增大首屏体积，可以用 import() 动态导入的方式实现按需加载：

'use client'; // Next.js 13+ 客户端组件需要加这个标识
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';

export default function YourComponent() {
  const { locale } = useRouter();
  const [keyFeatures, setKeyFeatures] = useState([]);

  useEffect(() => {
    // 按当前语言动态加载对应文件
    import(`@/${locale}/common/data/AppClassic`).then((mod) => {
      setKeyFeatures(mod.keyFeatures);
    });
  }, [locale]);

  // 加个简单的加载兜底即可
  if (!keyFeatures.length) return <div>加载中</div>;

  return <div>{/* 你的原有业务逻辑 */}</div>;
}

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