如何在next.js中间件中获取带有语言环境的真实路径名

Question

出于 SEO 原因，我尝试重定向（使用 301）从

/es/[*REST OF-ROUTE*]

到

/[*REST OF-ROUTE*]

的所有路线；但是，正如您在下面的屏幕截图中看到的，路径中的区域设置在请求中被删除。

pages/_middlewire.ts

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

const middleware = (req: NextRequest) => {
  console.log('NextUrl Pathname: ', req.nextUrl.pathname);
  console.log('Request URL: ', req.url);
  return NextResponse.next();
};

export default middleware;

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  localeDetection: true,
  i18n: {
    locales: ['es', 'en'],
    defaultLocale: 'es',
  },
  ...
};

那么，有没有办法在中间件函数中获取真实的路径名呢？

节点版本： 16 NextJs 版本： 12.1 React 版本： 17.0.2

如果您需要更多信息，请告诉我。

致以诚挚的问候！

Answer 1

以下是在 next.js 中隐藏 URL 中的默认区域设置的步骤（您需要升级到 next.js 13.1+）：

1. 将

   skipMiddlewareUrlNormalize: true,

   添加到

   next.config.js

   。更多信息：Next.js 文档；
2. 在下一个中间件中进行重定向：

import { NextResponse, userAgent } from 'next/server';

export async function middleware(req) {
  const { isBot } = userAgent(req);
  const redirectStatus = isBot ? 301 : 302;
  const { defaultLocale } = req.nextUrl;

  if (req.url.endsWith(`/${defaultLocale}`) || req.url.includes(`/${defaultLocale}/`)) {
    const urlStringWithoutDefaultLocale = req.url.endsWith(`/${defaultLocale}`)
      ? req.url.replace(`/${defaultLocale}`, '')
      : req.url.replace(`/${defaultLocale}/`, '/');
    const urlWithoutDefaultLocale = new URL(urlStringWithoutDefaultLocale);

    return NextResponse.redirect(urlWithoutDefaultLocale, { status: redirectStatus });
  }
  return NextResponse.next();
}