NextJS类型错误：找不到名称‘NextApplicationPage’如何解决？

解决方案 #

NextApplicationPage 不是 Next.js 官方内置的类型，是用于扩展页面组件自定义属性的自定义类型，你需要手动定义后再使用：

• 第一步：定义扩展类型
  你可以在项目的全局类型文件（如 next.d.ts 或 @types/next.d.ts）中添加如下定义，也可以在当前使用该类型的文件顶部直接定义：

import type { NextPage } from 'next';

// 扩展NextPage类型，加入你需要的requireAuth属性
export type NextApplicationPage<P = {}, IP = P> = NextPage<P, IP> & {
  requireAuth?: boolean; // 可根据实际业务调整requireAuth的类型，比如函数类型() => boolean
};

• 第二步：引入类型使用
  如果是单独文件定义的类型，在你写解构逻辑的文件顶部导入该类型即可消除找不到名称的报错：

import type { NextApplicationPage } from './你定义类型的文件路径';

// 你的原有代码可以正常使用
const { Component, pageProps}: { Component: NextApplicationPage; pageProps: any } = props

• 第三步（可选）：配置全局类型免导入
  如果不想每次都手动导入，可以把类型定义放到全局类型空间，同时确保你的 tsconfig.json 中 include 字段包含了类型文件的路径：

// tsconfig.json 示例配置
{
  "include": ["next-env.d.ts", "@types/**/*", "**/*.ts", "**/*.tsx"]
}

注意：以上适配方案针对 Next.js Pages Router，如果你使用的是 Next.js 13+ App Router，需要对应调整扩展的页面组件基础类型。

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