如何扩展NextPage类型为Next.js页面组件添加自定义鉴权字段

核心思路是基于Next.js原生提供的类型做扩展，不需要完全重写AppProps的完整结构，只增强需要的鉴权相关字段即可，以下是社区通用的标准实现：

首先导入依赖的基础类型，定义鉴权配置结构：

import type { NextPage } from "next";
import type { AppProps } from "next/app";
import type { ReactNode } from "react";

// 定义页面鉴权配置的类型，和你实际使用的字段结构匹配
type AuthConfig = {
  role?: string;
  loading?: ReactNode;
  unauthorized?: string;
  // 可根据自身业务需求扩展其他鉴权相关字段
}

扩展原生NextPage类型，增加可选的auth配置属性：

// 扩展后的页面组件类型，auth为可选字段，兼容不需要鉴权的普通页面
export type NextPageWithAuth<P = {}, IP = P> = NextPage<P, IP> & {
  auth?: AuthConfig;
}

基于原生AppProps扩展，仅替换Component的类型为我们增强后的版本，保留所有原生字段的类型定义：

export type AppPropsWithAuth<P = {}> = AppProps<P> & {
  Component: NextPageWithAuth;
}

使用示例 #

在_app.tsx中直接使用扩展后的类型即可获得完整的类型提示：

function MyApp({ Component, pageProps }: AppPropsWithAuth) {
  // 可以直接读取Component.auth做鉴权逻辑，所有字段都有正确的类型校验
  if (Component.auth) {
    // 你的鉴权逻辑：读取session判断角色、显示加载态、跳转未授权页等
  }
  return <Component {...pageProps} />
}

export default MyApp;

页面组件的写法和你之前的习惯完全兼容：

const AdminDashboard: NextPageWithAuth = () => {
  return <div>管理员面板</div>
}

AdminDashboard.auth = {
  role: "admin",
  loading: <AdminLoadingSkeleton />,
  unauthorized: "/login-with-different-user",
}

export default AdminDashboard;

该实现完全保留了Next.js原生类型的所有能力，不需要自行维护pageProps等其他字段的类型，后续Next.js版本升级也不会出现类型兼容问题。

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