NextJS多语言场景下客户端路由重定向未生效问题求助

问题根源 #

next.config.js中配置的redirects规则仅在服务端请求场景生效（比如手动输入URL刷新、页面首次加载）。而使用<Link>或router.push的客户端路由是SPA式导航，直接在客户端匹配页面组件并渲染，不会触发服务端的重定向逻辑，因此地址栏不会自动更新为预期的友好URL。

解决方案 #

1. 扩展Middleware处理全场景重定向 #

修改middleware.js，在现有逻辑基础上添加路径重定向检测，让服务端请求和客户端路由导航都能触发重定向：

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

const PUBLIC_FILE = /\.(.*)$/

// 定义重定向映射表，统一管理路径规则
const redirectRules = [
  { source: '/fr/about-us', destination: '/fr/qui-sommes-nous', permanent: true },
  { source: '/en/qui-sommes-nous', destination: '/en/about-us', permanent: true }
]

export function middleware(req: NextRequest) {
  // 跳过静态资源、API路由等
  if (
    req.nextUrl.pathname.startsWith('/_next') ||
    req.nextUrl.pathname.includes('/api/') ||
    PUBLIC_FILE.test(req.nextUrl.pathname)
  ) {
    return
  }

  // 处理默认locale重定向
  if (req.nextUrl.locale === 'default') {
    const locale = req.cookies.get('NEXT_LOCALE')?.value || 'fr'
    return NextResponse.redirect(
      new URL(`/${locale}${req.nextUrl.pathname}${req.nextUrl.search}`, req.url)
    )
  }

  // 检查当前路径是否需要重定向
  const currentPath = req.nextUrl.pathname
  const matchedRule = redirectRules.find(rule => rule.source === currentPath)
  if (matchedRule) {
    const targetUrl = new URL(matchedRule.destination, req.url)
    // 保留查询参数
    targetUrl.search = req.nextUrl.search
    return NextResponse.redirect(targetUrl, {
      status: matchedRule.permanent ? 308 : 307
    })
  }
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}

2. 优化组件的路径使用 #

虽然Middleware会兜底处理重定向，但建议直接让<Link>指向最终的友好URL，避免额外的客户端跳转。可以封装一个工具函数统一管理本地化路径：

// utils/localizedPaths.js
export function getLocalizedPath(locale, basePath) {
  const pathMappings = {
    fr: {
      '/about-us': '/qui-sommes-nous'
    },
    en: {
      '/qui-sommes-nous': '/about-us'
    }
  }
  return pathMappings[locale]?.[basePath] || basePath
}

使用方式：

import Link from 'next/link'
import { getLocalizedPath } from '../utils/localizedPaths'

// 法语环境下跳转至友好路径
<Link href={getLocalizedPath('fr', '/about-us')} locale="fr">
  关于我们
</Link>

3. 确认rewrites配置正确性 #

当前next.config.js中的rewrites配置已设置locale: false，确保Next.js不会自动为路径添加locale前缀，这部分无需修改，保持现有配置即可：

async rewrites() {
  return {
    beforeFiles: [
      {
        source: '/fr/qui-sommes-nous',
        destination: '/fr/about-us',
        locale: false
      }
    ]
  }
}

效果验证 #

• 使用<Link>或router.push导航时，地址栏会自动更新为友好URL
• 手动输入旧路径（如/fr/about-us）仍会触发重定向
• 页面内容正常渲染对应语言版本

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