Next.js中如何将URL里的语言标识"DE"改为小写？

以下是几种可行的实现方式，根据你的国际化方案选择对应方法：

1. 针对国际化库（如next-intl）：调整配置生成小写路由 #

如果使用next-intl这类主流国际化工具，可直接在配置中统一使用小写语言码：

• 修改i18n.ts配置文件，确保locales数组为小写标识：

// i18n.ts
import { createI18nClient } from 'next-intl';

export default createI18nClient({
  locales: ['en', 'de'], // 直接使用小写语言码
  defaultLocale: 'en',
  localePrefix: 'always'
});

• 生成内部链接时，直接传入小写语言参数：

import { useRouter } from 'next/navigation';

const router = useRouter();
router.push(`/de/${targetPath}`);

2. 使用中间件实现重定向（兼容旧URL） #

如果需要兼容已存在的大写/DE/路径访问，可通过Next.js中间件将大写路径永久重定向到小写版本：

在项目根目录创建middleware.ts：

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

export function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname;
  
  // 匹配开头为/DE/的路径，替换为/de/
  if (pathname.startsWith('/DE/')) {
    const newPathname = pathname.replace(/^\/DE\//, '/de/');
    const newUrl = new URL(newPathname, request.url);
    return NextResponse.redirect(newUrl, 301);
  }
  
  return NextResponse.next();
}

// 指定匹配的路由规则
export const config = {
  matcher: ['/DE/:path*']
};

3. 路由参数校验（App Router） #

如果使用App Router的动态路由（如[lang]/page.tsx），可在页面中校验语言参数，强制转为小写：

在[lang]/page.tsx中添加参数处理逻辑：

import { redirect, notFound } from 'next/navigation';

type Props = {
  params: { lang: string };
};

export default function Page({ params }: Props) {
  const validLocales = ['en', 'de'];
  const lowerLang = params.lang.toLowerCase();

  if (!validLocales.includes(lowerLang)) {
    notFound();
  }

  // 如果原参数是大写，重定向到小写版本
  if (params.lang !== lowerLang) {
    redirect(`/${lowerLang}`);
  }
  
  // 页面业务逻辑...
}

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