Next.js构建时如何排除pages/api目录下的API相关文件？

下面是几种可行的实现方式，根据你的项目场景选择：

方法1：通过Webpack配置忽略API文件（推荐） #

在项目根目录的next.config.js中，利用Webpack的IgnorePlugin匹配并排除pages/api下的所有文件。这种方式会直接阻止Webpack打包这些文件，适合永久排除的场景。

修改next.config.js如下：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 匹配pages/api目录下的所有文件
    config.plugins.push(
      new config.webpack.IgnorePlugin({
        resourceRegExp: /pages\/api\/.*/,
      })
    );
    return config;
  },
};

module.exports = nextConfig;

执行next build时，Webpack就会跳过pages/api下的所有文件打包。

方法2：环境变量控制API路由导出 #

如果只是临时需要排除API路由，不想修改配置文件，可以在每个API路由文件顶部添加条件判断，根据环境变量决定是否导出路由逻辑。

在pages/api下的每个文件中添加：

// 检查环境变量，决定是否禁用当前API路由
if (process.env.SKIP_API_ROUTES === 'true') {
  module.exports = () => null;
} else {
  // 原有的API处理逻辑
  export default function handler(req, res) {
    res.status(200).json({ data: 'API response' });
  }
}

构建时通过环境变量启用排除：

SKIP_API_ROUTES=true next build

方法3：针对Next.js 13+ App Router的方案 #

如果你使用的是App Router（app目录），要排除app/api下的API路由，同样可以用Webpack的IgnorePlugin，只需要调整匹配规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.plugins.push(
      new config.webpack.IgnorePlugin({
        resourceRegExp: /app\/api\/.*/,
      })
    );
    return config;
  },
};

module.exports = nextConfig;

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