Next.js 13：export模式构建时如何忽略app/api文件夹？

在Next.js 13中，当nextConfig.output设置为"export"时，app/api目录下的路由会触发构建报错——因为静态导出模式不依赖Node.js服务器运行，天然不支持API路由。如果项目需要根据环境变量切换构建类型，可通过以下方式在export模式构建时忽略API文件夹：

报错信息 #

Export encountered errors on following paths:
/api/revalidate/route: /api/revalidate

相关代码 #

src/app/api/revalidate/route.ts 文件 #

import { NextRequest, NextResponse } from 'next/server';
import { revalidateTag } from 'next/cache';
 
export async function GET(request: NextRequest) {
  const tag = request.nextUrl.searchParams.get('tag');
  if(tag){
    revalidateTag(tag);
  }
  return NextResponse.json({ revalidated: true, now: Date.now() });
}

Next.config.js #

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: process.env.NEXT_OUTPUT_MODE,
};

module.exports = nextConfig;

解决方案 #

方法1：通过Webpack配置忽略API文件 #

在next.config.js中根据环境变量判断，启用null-loader忽略API目录下的所有文件，避免构建时检测到这些路由：

1. 安装依赖：

npm install null-loader --save-dev
# 或
yarn add null-loader -D

2. 修改next.config.js：

/** @type {import('next').NextConfig} */
const isExportMode = process.env.NEXT_OUTPUT_MODE === 'export';

const nextConfig = {
  output: process.env.NEXT_OUTPUT_MODE,
  webpack: (config) => {
    if (isExportMode) {
      // 匹配并忽略src/app/api下的所有文件
      config.module.rules.push({
        test: /src\/app\/api\/.*$/,
        use: 'null-loader',
      });
    }
    return config;
  },
};

module.exports = nextConfig;

方法2：构建前通过脚本删除API文件夹 #

在package.json的构建脚本中，根据环境变量判断，在export模式构建前删除API目录：

"scripts": {
  "build": "sh -c 'if [ \"$NEXT_OUTPUT_MODE\" = \"export\" ]; then rm -rf src/app/api; fi; next build'"
}

注：Windows环境需调整脚本逻辑，可搭配cross-env实现跨平台环境变量统一处理。

方法3：条件式文件结构（长期维护推荐） #

将API路由放在单独目录（如app/api-server），通过环境变量动态控制路由入口是否启用。这种方式适合需要保留API代码、仅在非导出模式下启用的场景，但需要调整项目结构。

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