Next.js实现旧版西语URL重定向至核心页并自动翻译（无闪烁）

针对Next.js + i18next重构后兼容旧西语URL（如/page1-es）的需求，核心解决思路是在页面渲染前完成重定向和语言环境配置，避免404页面闪烁。最可靠的方案是使用Next.js Middleware，具体实现如下：

1. 用Middleware拦截旧URL并处理重定向 #

Middleware运行在请求到达页面之前（服务器/边缘端），可以直接修改请求或返回重定向响应，完全绕过not-found页面的渲染。

编写middleware.ts #

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

export function middleware(request: NextRequest) {
  // 匹配所有以-es结尾的路径（支持多级路径，如/blog/post1-es）
  const oldSpanishPathRegex = /^\/(.+)-es(\/.*)?$/;
  const pathMatch = request.nextUrl.pathname.match(oldSpanishPathRegex);

  if (pathMatch) {
    // 提取去掉-es后缀的核心路径
    const corePath = pathMatch[1] + (pathMatch[2] || '');
    // 构建新的目标URL
    const targetUrl = new URL(`/${corePath}`, request.url);

    // 设置i18next语言Cookie，让应用自动切换到西语
    const redirectResponse = NextResponse.redirect(targetUrl, 301); // 301永久重定向，利于SEO
    redirectResponse.cookies.set('i18next', 'es', {
      path: '/',
      maxAge: 365 * 24 * 60 * 60, // 有效期1年
      httpOnly: false, // 允许前端读取，确保i18next能识别
      secure: process.env.NODE_ENV === 'production',
    });

    return redirectResponse;
  }

  // 非旧URL请求，正常放行
  return NextResponse.next();
}

// 配置Middleware的匹配范围，排除静态资源和API路由
export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico|assets).*)',
  ],
};

2. 配置i18next从Cookie读取语言 #

修改你的i18n配置文件，让它优先从Cookie读取语言设置，这样重定向后应用会自动切换到西语：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: process.env.NODE_ENV === 'development',
    detection: {
      // 优先从Cookie读取语言，其次是本地存储、浏览器语言
      order: ['cookie', 'localStorage', 'navigator', 'htmlTag'],
      caches: ['cookie'], // 将语言设置缓存到Cookie，保持跨页面一致性
    },
    resources: {
      en: {
        translation: { /* 你的英文翻译资源 */ }
      },
      es: {
        translation: { /* 你的西语翻译资源 */ }
      },
    },
  });

export default i18n;

3. 关键优势说明 #

• 无404闪烁：Middleware在页面渲染前直接返回重定向响应，浏览器不会加载not-found.tsx，完全避免闪烁问题。
• 自动触发翻译：通过设置i18next Cookie，i18next会自动识别并切换到西语环境，无需客户端额外处理。
• SEO友好：使用301永久重定向，告诉搜索引擎旧URL已永久迁移到新地址，不会影响搜索排名。

注意事项 #

• 调整正则表达式以匹配你的实际旧URL结构，如果旧URL是/es-page1这类格式，需要修改正则逻辑。
• 如果你的应用使用Next.js App Router，上述Middleware代码完全兼容，无需额外调整。
• 若需临时兼容而非永久迁移，可将301改为302临时重定向。

内容的提问来源于stack exchange，提问作者gene b.