Next.js App Router使用next-intl静态导出时的结构异常问题

问题描述 #

使用next-intl最新版本做静态导出时，生成的文件结构不符合预期，存在两个核心问题：

• 默认语言未省略独立文件夹/前缀，反而生成了以默认语言命名的根文件（如en.html而非根目录的index.html）
• 路由路径未做本地化映射，预期多语言对应独立子目录+本地化路由名，实际是统一路由名前加语言代码前缀

预期静态导出结构：

/index.html (英文默认)
/de/index.html (德文默认)
/about-us/index.html
/de/uber-uns/index.html

实际生成结构：

/en.html
/de.html
/en/about.html
/de/about.html

排查与修复方向 #

1. 修正next-intl核心配置 #

确保在i18n.ts（或对应配置文件）中正确设置默认语言及前缀规则，关键是开启localePrefix: 'as-needed'：

import { defineI18nConfig } from 'next-intl';

export default defineI18nConfig({
  defaultLocale: 'en',
  locales: ['en', 'de'],
  localePrefix: 'as-needed' // 仅非默认语言添加路由前缀
});

2. 调整Next.js静态导出配置 #

在next.config.js中配合next-intl插件，明确静态导出模式及多语言参数：

const createNextIntlPlugin = require('next-intl/plugin');

const withNextIntl = createNextIntlPlugin('./i18n.ts');

module.exports = withNextIntl({
  output: 'export',
  i18n: {
    locales: ['en', 'de'],
    defaultLocale: 'en'
  }
});

3. 处理本地化路由映射 #

如果需要自定义路由名（如英文about-us对应德文über-uns），需在next-intl配置中添加路由映射：

// i18n.ts
export default defineI18nConfig({
  // ...其他配置
  routes: {
    '/about-us': {
      de: '/über-uns'
    }
  }
});

4. 页面组件的静态参数生成 #

针对App Router，需在页面组件中通过generateStaticParams生成对应语言的静态参数，确保路由结构正确：

// app/[locale]/about-us/page.tsx
import { useTranslations } from 'next-intl';

export async function generateStaticParams() {
  return [
    { locale: 'en' },
    { locale: 'de' }
  ];
}

export default function AboutUs({ params: { locale } }) {
  const t = useTranslations('AboutUs');
  return <h1>{t('title')}</h1>;
}

排查补充信息 #

若以上调整无效，需提供以下信息进一步定位问题：

• next-intl与Next.js的具体版本号
• 完整的i18n.ts配置内容
• next.config.js的完整代码
• 使用的是App Router还是Page Router
• 页面组件的目录结构及核心代码

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