Next.js v12.2.5中NextResponse无res.revalidate()，按需ISR报错

问题原因 #

你在Pages Router的API路由中错误使用了App Router的NextRequest/NextResponse类型，而revalidate方法属于Pages Router API路由的NextApiResponse类型，两者类型不兼容导致报错。

解决步骤 #

1. 修正类型导入与代码定义 #

将API路由中的类型替换为Pages Router专属的NextApiRequest/NextApiResponse，修改后的代码如下：

import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    // 建议添加密钥验证，防止恶意调用接口
    if (req.query.secret !== process.env.REVALIDATE_SECRET) {
        return res.status(401).json({ message: 'Invalid secret' });
    }

    try {
        await res.revalidate('/');
        return res.json({ revalidated: true });
    } catch (err) {
        console.error(err);
        return res.status(500).send('Error revalidating');
    }
}

2. 确认API路由路径 #

确保该文件放在pages/api/revalidate.ts（或.js）路径下，这是Pages Router API路由的标准存放位置。

3. 触发验证 #

通过GET请求访问/api/revalidate?secret=你的密钥（密钥需提前在环境变量REVALIDATE_SECRET中配置），即可触发首页的增量静态再生。

补充说明 #

• NextRequest/NextResponse主要用于Next.js 13+的App Router中间件或路由处理函数，Pages Router的API路由仍需使用NextApiRequest/NextApiResponse类型。
• 按需ISR的revalidate方法在Next.js 12.2.0+确实已支持，但必须在正确的类型上下文下调用。

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