如何扩展Next.js的NextPage TypeScript类型以支持auth对象

要解决这个TypeScript错误，你需要通过**TypeScript声明文件（.d.ts）**扩展Next.js的NextPage类型，为其添加可选的auth属性。具体步骤如下：

1. 创建或修改TypeScript声明文件 #

在项目根目录或src文件夹下创建一个声明文件（比如next.d.ts或者放在types/next.d.ts），内容如下：

import type { NextPage } from 'next';

// 扩展Next.js的NextPage接口
declare module 'next' {
  interface NextPage<P = {}, IP = P> {
    // 添加可选的auth属性，你可以根据需求定义其结构
    auth?: {
      roles?: string[]; // 示例：角色列表
      required?: boolean; // 示例：是否需要认证
      // 其他你需要的权限相关字段
    };
  }
}

2. 确保声明文件被TypeScript识别 #

检查你的tsconfig.json，确保声明文件所在的目录被包含在include数组中：

{
  "compilerOptions": {
    // 你的编译选项
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "types/**/*.d.ts" // 如果声明文件在types文件夹下
  ]
}

3. 在页面组件中使用扩展后的类型 #

现在你可以在页面组件的默认导出上添加auth属性，TypeScript不会再报错：

import type { NextPage } from 'next';

const Stu_HomePage: NextPage = () => {
  return <div>学生仪表盘首页</div>;
};

// 添加auth配置
Stu_HomePage.auth = {
  roles: ['student'],
  required: true
};

export default Stu_HomePage;

说明 #

• 这种方式属于TypeScript的模块扩展，允许你在不修改Next.js源码的情况下扩展其内置类型。
• 你可以根据实际需求自定义auth对象的结构，比如添加权限校验规则、路由守卫配置等。

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