Next.js 13.4：如何在Middleware中获取动态路由参数

动态路由的分段（比如/app/[slug]里的slug）属于路径的一部分，并非查询参数，所以你无法通过req.nextUrl.searchParams获取到它——searchParams仅对应URL中?后的参数。下面是两种可行的获取方式：

方法一：使用URL Pattern API #

利用浏览器原生的URL Pattern API（Next.js已支持），可以精准匹配动态路由结构并提取分段值：

import { NextRequest } from 'next/server';

export async function middleware(req: NextRequest) {
  // 创建匹配/app/[slug]路由的模式
  const dynamicRoutePattern = new URLPattern({ pathname: '/app/:slug' });
  const matchResult = dynamicRoutePattern.exec(req.nextUrl);

  if (matchResult) {
    const slugValue = matchResult.pathname.groups.slug;
    console.log('当前slug值:', slugValue);
    // 这里可根据slug是否存在执行对应逻辑
  } else {
    // 匹配非动态路由，比如/app/about、/app/faq
    console.log('当前为非动态路由');
  }
}

方法二：正则表达式匹配路径 #

如果你的路由结构固定，也可以用正则直接匹配pathname来提取分段：

import { NextRequest } from 'next/server';

export async function middleware(req: NextRequest) {
  const pathname = req.nextUrl.pathname;
  // 匹配/app/后接单个分段的路径
  const slugMatch = pathname.match(/^\/app\/([^\/]+)$/);

  if (slugMatch) {
    const slugValue = slugMatch[1];
    console.log('当前slug值:', slugValue);
  } else {
    console.log('当前为非动态路由');
  }
}

额外说明 #

如果需要限制Middleware仅在特定路由触发，可以在next.config.js中配置matcher，缩小触发范围：

module.exports = {
  middleware: {
    matcher: ['/app/:slug*', '/app/about', '/app/faq']
  }
};

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