Next.js 14 App Router多语言动态路由复用页面实现咨询

可行性确认 #

完全可行，你可以通过动态路由+路由映射配置的方式，只用单个page.tsx文件处理所有语言对应的不同slug路由，无需创建冗余文件。

具体实现步骤 #

1. 创建语言-Slug映射配置文件 #

先定义全局配置文件，统一管理各语言对应的合法slug，方便后续验证和路由生成：

// app/lib/i18n-routes.ts
export const langSlugMap = {
  en: { contact: 'contact-us' },
  de: { contact: 'kontakt' },
  fr: { contact: 'contactez-nous' },
} as const;

// 生成所有合法的语言-slug组合，用于验证和静态生成
export const validLangSlugPairs = Object.entries(langSlugMap).flatMap(([lang, slugs]) =>
  Object.values(slugs).map(slug => ({ lang, slug }))
);

2. 创建动态路由页面 #

在app目录下创建[lang]/[slug]/page.tsx，作为所有语言-slug组合的统一处理页面：

// app/[lang]/[slug]/page.tsx
import { notFound } from 'next/navigation';
import { validLangSlugPairs } from '@/app/lib/i18n-routes';

type PageProps = {
  params: { lang: string; slug: string };
};

export default function SharedPage({ params }: PageProps) {
  const { lang, slug } = params;

  // 验证当前路由的语言和slug组合是否合法
  const isValidRoute = validLangSlugPairs.some(
    pair => pair.lang === lang && pair.slug === slug
  );

  // 非法路由返回404
  if (!isValidRoute) {
    notFound();
  }

  // 在这里复用页面逻辑，根据lang加载对应翻译或内容
  return (
    <div>
      <h1>
        {lang === 'en' ? 'Contact Us' : lang === 'de' ? 'Kontakt' : 'Contactez-nous'}
      </h1>
      {/* 通用页面内容，可根据lang动态切换 */}
    </div>
  );
}

// 可选：静态生成所有合法路由（适合SSG场景）
export async function generateStaticParams() {
  return validLangSlugPairs;
}

3. 可选：用Middleware处理路由校验与重定向 #

如果需要拦截非法路由（比如用户手动输入错误slug），可以添加middleware.ts实现自动重定向或返回404：

// app/middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { langSlugMap } from '@/app/lib/i18n-routes';

export function middleware(request: NextRequest) {
  const pathSegments = request.nextUrl.pathname.split('/').filter(Boolean);
  const [lang, slug] = pathSegments;

  if (!lang || !slug) return NextResponse.next();

  // 检查当前语言是否存在，以及slug是否属于该语言的合法值
  const langSlugs = langSlugMap[lang as keyof typeof langSlugMap];
  if (!langSlugs || !Object.values(langSlugs).includes(slug)) {
    // 非法路由可返回404或重定向到默认语言路由
    return NextResponse.redirect(new URL('/en/contact-us', request.url));
  }

  return NextResponse.next();
}

// 指定Middleware生效的路由范围
export const config = {
  matcher: '/:lang/:slug',
};

方案优势 #

• 仅需单个page.tsx文件，避免逻辑重复
• 路由规则集中在配置文件，新增语言或slug只需修改配置，易于维护扩展
• 支持SSG/ISR/SSR等多种渲染模式，适配不同业务场景

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