Next.js 14 App Router i18n配置：根路径404问题求助

核心思路 #

通过中间件路由改写/重定向配合动态语言路由，让根路径/默认映射到英文版本，同时保留/en和/de的独立访问能力。

1. 配置中间件（处理根路径路由） #

在项目根目录创建middleware.ts（与app文件夹同级），用来拦截路由并处理默认语言跳转：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

const SUPPORTED_LANGS = ['en', 'de'];
const DEFAULT_LANG = 'en';

export function middleware(request: NextRequest) {
  // 根路径直接改写路由，显示英文版本内容（URL保持/不变）
  if (request.nextUrl.pathname === '/') {
    return NextResponse.rewrite(new URL(`/${DEFAULT_LANG}`, request.url));
  }

  // 校验路径中的语言前缀，非法前缀重定向到默认语言
  const lang = request.nextUrl.pathname.split('/')[1];
  if (!SUPPORTED_LANGS.includes(lang)) {
    return NextResponse.redirect(new URL(`/${DEFAULT_LANG}${request.nextUrl.pathname}`, request.url));
  }

  return NextResponse.next();
}

// 指定中间件作用范围
export const config = {
  matcher: ['/', '/:lang*'],
};

2. 调整路由结构 #

将原有的app/en和app/de目录内容迁移到动态路由app/[lang]下，结构如下：

app/
  [lang]/
    layout.tsx   // 语言切换逻辑
    page.tsx     // 页面内容
  layout.tsx     // 根布局
  i18n.ts        // i18n配置文件

3. 配置i18n实例 #

在app/i18n.ts中初始化i18n，适配路由语言检测：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import resourcesToBackend from 'i18next-resources-to-backend';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  // 动态加载对应语言的翻译文件
  .use(resourcesToBackend((lang: string) => import(`../public/locales/${lang}/translation.json`)))
  .init({
    fallbackLng: 'en',
    debug: false,
    interpolation: { escapeValue: false },
    // 优先从URL路径检测语言
    detection: {
      order: ['path', 'cookie', 'navigator'],
      lookupFromPathIndex: 0,
    },
  });

export default i18n;

4. 语言布局组件（app/[lang]/layout.tsx） #

在动态路由的布局中处理语言切换：

'use client';

import { useEffect } from 'react';
import i18n from '../i18n';

export default function LanguageLayout({
  params: { lang },
  children,
}: {
  params: { lang: string };
  children: React.ReactNode;
}) {
  useEffect(() => {
    if (i18n.language !== lang) {
      i18n.changeLanguage(lang);
    }
  }, [lang]);

  return <>{children}</>;
}

5. 翻译文件准备 #

在public/locales下创建对应语言的翻译文件：

• public/locales/en/translation.json

{
  "welcome": "Welcome to the English version!"
}

• public/locales/de/translation.json

{
  "welcome": "Willkommen zur deutschen Version!"
}

6. 页面组件示例（app/[lang]/page.tsx） #

'use client';

import { useTranslation } from 'react-i18next';

export default function Home({ params: { lang } }: { params: { lang: string } }) {
  const { t } = useTranslation();

  return (
    <main>
      <h1>{t('welcome')}</h1>
      <p>Current language: {lang}</p>
    </main>
  );
}

验证效果 #

• 访问/：显示英文内容（URL保持/不变，若要URL跳转成/en，可将middleware中的rewrite改为redirect）
• 访问/en：显示英文内容
• 访问/de：显示德文内容

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