如何在返回404或重定向时删除Next.js静态生成文件？

问题背景 #

当使用Next.js的增量静态重建（ISR）功能时，若从CMS中删除某个页面，调用revalidate后虽然会返回404，但.next/server/pages目录下的旧HTML和JSON构建文件不会被自动删除。当isrMemoryCacheSize耗尽时，Next.js会遗忘之前的404状态，转而读取磁盘上的旧文件返回，导致站点展示已删除的内容。

解决方案：返回404/重定向时删除旧构建文件 #

核心思路是在getStaticProps中，当判断页面不存在（返回notFound: true）或需要重定向时，主动删除对应页面的构建文件。

实现步骤 #

1. 确定目标文件路径
   根据当前页面的路由结构，拼接出.next/server/pages目录下对应的HTML和JSON文件路径。动态路由页面可通过context.params获取路由参数，固定路由直接使用固定路径。

2. 异步删除文件
   使用Node.js的fs/promises模块异步删除文件，避免阻塞页面逻辑；同时捕获文件不存在的错误，防止删除操作影响页面正常返回。

代码示例（动态路由页面） #

import { promises as fs } from 'fs';
import path from 'path';

export async function getStaticProps(context) {
  const { slug } = context.params;
  // 从CMS获取页面数据
  const pageData = await fetchPageFromCMS(slug);

  if (!pageData) {
    // 构建要删除的文件路径
    const htmlFilePath = path.join(process.cwd(), '.next', 'server', 'pages', `${slug}.html`);
    const jsonFilePath = path.join(process.cwd(), '.next', 'server', 'pages', `${slug}.json`);

    // 异步删除文件，忽略文件不存在的错误
    try {
      await Promise.all([
        fs.unlink(htmlFilePath).catch(() => {}),
        fs.unlink(jsonFilePath).catch(() => {})
      ]);
    } catch (error) {
      console.error('删除旧页面文件失败:', error);
    }

    return {
      notFound: true,
      revalidate: 60 // 可选设置重新验证间隔
    };
  }

  // 正常返回页面数据
  return {
    props: { pageData },
    revalidate: 60
  };
}

注意事项 #

• 嵌套路由适配：如果是嵌套路由（如/posts/[id]），需调整路径拼接逻辑，示例路径改为path.join(process.cwd(), '.next', 'server', 'pages', 'posts', ${id}.html)
• 权限问题：确保生产环境中Node.js进程拥有.next目录的写入/删除权限
• 复用逻辑：可将删除文件的逻辑封装成工具函数，在多个页面中复用
• 重定向场景：若需要返回重定向（redirect对象），同样可以在返回前执行上述删除操作

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