Next.js中页面渲染前无需返回Props的服务端函数有哪些？

针对你在预渲染阶段校验页面访问权限的需求，有几个更合适的替代方案，无需强制返回Props：

1. 使用Next.js Middleware（推荐） #

Middleware是Next.js中专门处理请求拦截的服务端函数，运行在页面渲染之前，完全不需要和页面组件交互，直接在请求层面完成权限校验与重定向。

示例代码：

// middleware.js（放在项目根目录或src目录下）
import { NextResponse } from 'next/server';

export function middleware(request) {
  // 实现你的权限校验逻辑，比如从请求头、cookie获取用户信息
  const isAuthorized = checkUserPermission(request);

  if (!isAuthorized) {
    // 重定向到403禁止访问页面
    return NextResponse.redirect(new URL('/403', request.url));
  }

  // 授权通过，继续处理请求
  return NextResponse.next();
}

// 指定需要校验权限的页面路径，支持通配符
export const config = {
  matcher: ['/protected/:path*', '/admin'],
};

这个方案的优势：

• 逻辑集中，无需在每个页面重复编写校验代码
• 同时支持Pages Router和App Router
• 拦截时机更早，比getServerSideProps更高效

2. 在getServerSideProps中返回空Props（过渡方案） #

如果暂时不想切换到Middleware，也可以直接返回空的Props对象，完全不影响页面组件：

export async function getServerSideProps(context) {
  const isAuthorized = checkUserPermission(context.req);

  if (!isAuthorized) {
    return {
      redirect: {
        destination: '/403',
        permanent: false,
      },
    };
  }

  // 返回空Props即可，页面组件不会接收任何额外数据
  return { props: {} };
}

3. App Router下使用Server Component顶层逻辑 #

如果你用的是Next.js 13+的App Router，可以直接在Server Component的顶层执行权限校验，因为Server Component本身运行在服务端，渲染前会先执行这些逻辑：

// app/protected/page.js
import { redirect } from 'next/navigation';

// 服务端权限校验函数
async function checkUserAuthorization() {
  // 这里实现你的校验逻辑，比如查询数据库或验证token
  return false; // 示例：模拟未授权
}

export default async function ProtectedPage() {
  const isAuthorized = await checkUserAuthorization();

  if (!isAuthorized) {
    redirect('/403');
  }

  // 授权通过后渲染页面内容
  return <div>授权访问的页面内容</div>;
}

这个方案不需要额外的生命周期函数，直接在页面组件内完成校验，也无需传递Props。

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