Next.js中间件中如何获取带Locale的真实路径名？

在Next.js 12的i18n配置机制下，框架会自动从req.nextUrl.pathname和req.url中剥离locale前缀，这是默认行为。要获取包含locale的原始请求路径，或是实现你需要的301重定向需求，可按以下方式处理：

方法1：借助req.nextUrl.locale拼接原始路径 #

虽然pathname被剥离了locale，但框架会将当前匹配到的locale存储在req.nextUrl.locale中，你可以用它还原出原始路径：

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

const middleware = (req: NextRequest) => {
  const { locale, pathname } = req.nextUrl;
  // 拼接带locale的原始路径
  const originalPath = `/${locale}${pathname}`;
  console.log('原始请求路径:', originalPath);

  // 实现重定向逻辑：若locale为es且路径非根目录，重定向到不带/es的路径
  if (locale === 'es' && pathname !== '/') {
    const targetUrl = new URL(pathname, req.url);
    return NextResponse.redirect(targetUrl, 301);
  }

  return NextResponse.next();
};

export default middleware;

方法2：通过请求头获取原始URL #

Next.js会在请求头中保留完整的原始请求URL，你可以通过req.headers.get('x-nextjs-url')直接获取：

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

const middleware = (req: NextRequest) => {
  const originalUrl = req.headers.get('x-nextjs-url');
  console.log('原始请求URL:', originalUrl);

  if (originalUrl?.startsWith('/es/')) {
    const targetPath = originalUrl.replace(/^\/es/, '');
    const targetUrl = new URL(targetPath, req.url);
    return NextResponse.redirect(targetUrl, 301);
  }

  return NextResponse.next();
};

export default middleware;

关键注意事项 #

• 你的中间件文件名拼写错误（当前为_middlewire.ts，正确应为_middleware.ts），这会导致中间件无法生效，请先修正该问题。
• 由于默认locale设为es，用户访问不带locale的路径时会自动匹配为es locale，重定向逻辑需避免循环重定向（比如不要对根路径/执行重定向）。

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