如何在Next.js中配置仅允许指定值的动态路由前缀？

针对你的需求，这里提供两种可行方案，适配不同Next.js版本：

方案一：使用Middleware（Next.js 12+ 推荐） #

Middleware能在请求到达页面之前全局校验路径，性能更优。

1. 在项目根目录创建middleware.ts（或.js）文件，写入以下代码：

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

// 定义允许的前缀列表
const allowedPrefixes = ['A', 'B', 'C'];

export function middleware(request: NextRequest) {
  // 拆分路径，提取第一个分段作为前缀
  const pathSegments = request.nextUrl.pathname.split('/').filter(Boolean);
  const prefix = pathSegments[0];

  // 校验前缀，非法则返回404
  if (prefix && !allowedPrefixes.includes(prefix)) {
    return new NextResponse('404 Not Found', { status: 404 });
  }

  // 前缀合法，继续处理请求
  return NextResponse.next();
}

// 指定中间件作用的路由匹配规则
export const config = {
  matcher: ['/:prefix/:path*'],
};

这段代码会自动拦截所有/xxx/xxx格式的请求，检查第一个路径分段是否在允许列表内，非法请求直接返回404。

方案二：使用getServerSideProps（适配Next.js 11及以下） #

如果你的项目版本较低，可以在每个子页面中添加前缀校验逻辑，也可以抽成公共函数复用。

步骤1：创建校验工具函数（可选） #

在项目中新建utils/validatePrefix.js：

export function validatePrefix(prefix) {
  const allowedPrefixes = ['A', 'B', 'C'];
  return allowedPrefixes.includes(prefix);
}

步骤2：在页面中添加校验 #

以pages/[prefix]/page-1.js为例，引入校验函数并添加getServerSideProps：

import { validatePrefix } from '../../utils/validatePrefix';

export async function getServerSideProps(context) {
  const { prefix } = context.params;

  // 校验前缀，非法则返回404
  if (!validatePrefix(prefix)) {
    return {
      notFound: true,
    };
  }

  // 将前缀传递给页面组件（可选）
  return {
    props: { prefix },
  };
}

// 页面组件
export default function Page1({ prefix }) {
  return <div>当前前缀：{prefix} - Page 1</div>;
}

需要注意，所有[prefix]下的子页面（page-1、page-2、page-3）都需要添加这段逻辑，包括[prefix]目录下的index.js（如果存在），避免直接访问非法前缀路径。

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