如何在Next.js构建时临时禁用指定页面（无需物理修改文件）

当然可以！不用物理修改或删除页面文件，有几个临时方案能帮你跳过这些有问题的页面构建、禁用对应路由，下面给你详细说：

方案一：用环境变量控制页面导出（简单无依赖） #

这个方案不需要额外安装包，通过在页面代码里加条件判断，让构建时跳过原本的SSR逻辑，直接返回"页面不存在"的状态：

打开pages/foo/bar/[id].jsx，在原有代码外层加环境变量判断：

// 临时禁用该页面的构建逻辑
if (process.env.DISABLE_BAR_PAGES === 'true') {
  // 返回空组件+notFound，让Next.js认为该页面不存在
  export default function Bar() { return null; }
  export async function getStaticProps() {
    return { notFound: true };
  }
  export async function getStaticPaths() {
    // 不生成任何静态路径
    return { paths: [], fallback: false };
  }
} else {
  // 你原来的组件和SSR逻辑
  export default function Bar() {
    // 原组件内容
  }
  export async function getStaticProps() {
    return someApiCallThatCurrentlyFails();
  }
  // 如果有getStaticPaths也放在这里
}

然后执行构建时传入环境变量：

DISABLE_BAR_PAGES=true npm run build

这样Next.js会正常处理这个页面，但访问/foo/bar/[id]时会返回404，而且原来失败的API调用不会被执行，也就不会触发构建错误。如果要禁用多个页面（比如index.jsx），可以给每个页面加类似的判断，或者用统一的环境变量（比如DISABLE_PROBLEM_PAGES）。

方案二：用Webpack配置排除页面（彻底移除路由） #

如果希望这些页面完全不进入构建产物、路由系统里直接没有这些路径，可以通过修改Next.js的Webpack配置，用null-loader把指定页面文件替换为空：

1. 先安装依赖：

npm install null-loader --save-dev

2. 修改next.config.js，添加Webpack规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    // 排除bar相关的所有页面
    config.module.rules.push({
      test: /pages\/foo\/bar\/.*\.jsx$/,
      use: 'null-loader',
    });
    // 如果还要排除index.jsx，再加一条规则
    // config.module.rules.push({
    //   test: /pages\/index\.jsx$/,
    //   use: 'null-loader',
    // });
    return config;
  },
};

module.exports = nextConfig;

这样Webpack在打包时会忽略匹配到的页面文件，Next.js不会把它们注册为路由，构建时也不会执行这些页面里的任何代码，完美解决SSR错误的问题。

注意事项 #

• 方案一的优点是不需要额外依赖，随时可以通过移除环境变量恢复页面；方案二更彻底，但需要安装loader。
• 如果是TypeScript项目，记得把正则里的.jsx改成.tsx（或者同时匹配两种后缀）。
• 构建完成后，记得测试一下对应的路由是否确实无法访问，确保方案生效。

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