Next.js页面路由中如何将请求转发至另一匹配页面

Next.js页面路由本身没有原生支持在getServerSideProps中直接返回类似{ bypass: true }的参数，让请求流转到下一个匹配的路由（比如从something.ts转到[...slug].ts）。不过可以通过以下几种方案实现类似效果：

方案1：复用目标页面的服务端逻辑与组件 #

这是最直接的模拟转发方式，在something.ts中导入[...slug].ts的getServerSideProps和组件，当满足条件时，调用目标页面的服务端逻辑并渲染其组件。

// pages/something.tsx
import SlugPage, { getServerSideProps as getSlugServerProps } from './[...slug]';

export async function getServerSideProps(context) {
  // 替换成你的功能开关或条件判断
  const shouldForward = Math.random() > 0.5;

  if (shouldForward) {
    // 调用[...slug]页面的服务端逻辑
    const slugResult = await getSlugServerProps(context);
    // 将目标页面的props和组件传递给当前页面的渲染函数
    return {
      props: {
        ...slugResult.props,
        ForwardComponent: SlugPage,
      },
    };
  }

  // 正常渲染当前页面的逻辑
  return { props: { state: "good" } };
}

export default function SomethingPage({ ForwardComponent, ...props }) {
  // 如果需要转发，直接渲染[...slug]的组件
  if (ForwardComponent) {
    return <ForwardComponent {...props} />;
  }

  // 当前页面的正常渲染内容
  return <div>Something Page - Normal State</div>;
}

这种方式完全在服务端完成逻辑切换，前端URL不会变化，体验和直接匹配[...slug].ts一致。

方案2：使用Middleware提前拦截路由（推荐） #

如果希望在请求到达页面之前就决定路由走向，可以用Next.js的Middleware，在服务端提前修改请求的路由匹配目标。

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

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  // 判断是否是/something路径，且满足转发条件
  if (pathname === '/something' && Math.random() > 0.5) {
    // 服务端内部重写请求，让其匹配[...slug].ts
    // 保留原请求的URL参数与路径，直接让请求绕过something.ts走动态路由逻辑
    const targetUrl = new URL(request.url);
    return NextResponse.rewrite(targetUrl);
    // 若上述写法不生效，可尝试将路径重写为/_internal/something，再在[...slug]中处理该路径逻辑
  }

  return NextResponse.next();
}

export const config = {
  matcher: '/something', // 仅对/something路径生效
};

Middleware的优势在于逻辑更前置，避免了页面组件的冗余渲染，适合全局的功能开关类场景。

不推荐的方案：客户端重定向 #

如果尝试用getServerSideProps返回redirect到/something，会导致循环跳转（因为/something依然优先匹配something.ts），除非修改URL路径，但这会改变用户看到的地址，不符合需求，因此不推荐。

内容的提问来源于stack exchange，提问作者Jax-p