Ignore api and middleware when nextConfig.output is "export"

[zecka]

Summary

I have a next13 project that need different build type depending on environnement variable.

I'm using "app" folder

Here is my next.config.js

const nextConfig = {
    output: process.env.NEXT_OUTPUT_MODE,
}
module.exports = nextConfig

I have api folder and middleware file that should be used when next is build with output "standalone"

Druring build on "export" mode I got following error

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

Any way to ignore "api" folder and "middleware" file during build when "output" is "export" ?

Reproducible repository

https://github.com/zeckaissue/next-export-api-crash/

[sahariar-safin]

Sure, you can use the exclude property in your next.config.js file to ignore the api folder and middleware file when the output mode is export. Here is an example:

const nextConfig = {
  output: process.env.NEXT_OUTPUT_MODE,
  exclude: [
    'api',
    'middleware',
  ],
}

module.exports = nextConfig

This will tell Next.js to ignore the api and middleware folders when the output mode is export. This will prevent the error that you are getting.

Here is a more detailed explanation of how the exclude property works. When Next.js builds your application, it recursively walks through the directory structure of your application and looks for files that match the patterns in the exclude property. If a file matches a pattern in the exclude property, it will be ignored by Next.js.

In your case, you want to ignore the api and middleware folders. These folders are not important when the output mode is export. So, you can add them to the exclude property to tell Next.js to ignore them.

I hope this helps!

[zecka]

thank's @shafinthedeveloper

But, the exclude property seems to not be taken into account.

When I add the exclude property to nextConfig, I get the following warning:

• warn The root value has an unexpected property, exclude, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, configOrigin, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, modularizeImports, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, skipMiddlewareUrlNormalize, skipTrailingSlashRedirect, staticPageGenerationTimeout, swcMinify, target, trailingSlash, transpilePackages, typescript, useFileSystemPublicRoutes, webpack)

[jeffreyschultz]

exclude doesn't seem to be a valid next.config.js option.

[knoefel]

I'm having the same problem when i try to add the exclude option. @zecka @jeffreyschultz Did you solve this issue?

[icyJoseph]

You can solve it like this I think, with custom extensions: #51891 (comment)

[TeemuKoivisto]

It seems there's no option to flag this as AI-generated but clearly somebody copy-pasted the question to ChatGPT which produced this nonsense answer of exclude property

[zecka]

I find a workaround but maybe a built-in solution exist.

I add have installed ignore-loader for webpack

yarn add -D ignore-loader

Then i add following webpack property to my next.js.config

const nextConfig = {
  output: process.env.NEXT_OUTPUT_MODE,
  webpack: config => {
    if (process.env.NEXT_OUTPUT_MODE !== 'export' || !config.module) {
      return config;
    }
    config.module.rules?.push({
      test: /src\/app\/api/,
      loader: 'ignore-loader',
    });
    return config;
  },
}

[vietanhdev]

This does not work for me on Nextjs 14:

webpack: config => {
    if (!process.env.EXPORT_STATIC || !config.module) {
      return config;
    }
    config.module.rules?.push({
      test: /app\/api/,
      loader: 'ignore-loader',
    });
    return config;
  },

Error: Page "/api/auth/[...nextauth]" is missing "generateStaticParams()" so it cannot be used with "output: export" config.
`

[fatalegayatri]

do you find any solution

[pix4bom10]

This does not work for me on Nextjs 14:

webpack: config => {
    if (!process.env.EXPORT_STATIC || !config.module) {
      return config;
    }
    config.module.rules?.push({
      test: /app\/api/,
      loader: 'ignore-loader',
    });
    return config;
  },

Error: Page "/api/auth/[...nextauth]" is missing "generateStaticParams()" so it cannot be used with "output: export" config.
`

I got the same error.

[daveycodez]

I guess the only real way to fix this is to write a script that copies these files out of your project, does a build, then copies them back. ROFL! C'mon.... Just ignore API routes on exports obviously!

[icyJoseph]

Nah, just use custom page extensions, #51891 (comment)

[daveycodez]

Oh that's pretty sick actually, the documentation doesn't describe it exactly this way but I'm bookmarking that

[Zulqarnain-tkxel]

same issue my middleware of routing not working with out : "export in next config does anyone has solution for this ?

[icyJoseph]

Middleware is not supported in export mode, https://nextjs.org/docs/app/building-your-application/deploying/static-exports#unsupported-features

[artola]

Explain again. You use Middleware on dev mode, but when you ship, you use export output, and the Middleware gets in the way?

I use middleware on development because I need to add headers before a redirect (this one does does not support headers, only destination). Then when building with output="export" the middleware.ts is still there and a warning is printed.

Statically exporting a Next.js application via next export disables API routes and middleware.

It would be nice:

• to disable from the config, middleware: false, to indicate the intention.
• to be able to pass headers in the redirects, apart from destination, like a prop or like a function that allows to evaluate the request and return a redirect with/without new headers. IN such a way, I would not need a middleware for such a simple case.

[icyJoseph]

You can do this:

• I want to carve out API Routes #51891 (comment)

Call it middleware.api.ts or js, and it'll work in dev mode, but be carved out, as the author wanted, during production build, given that you follow my instructions there.

I think that should do the trick anyway, only ever tried with API routes, but Middleware is also affected by Page extensions, so why not. It is worth the try.

[artola]

@icyJoseph I will try right now. Thanks.

FYI it does not play so nice. If I use the extension "banana", there are problems with the loaders. Then I would need to do something like @daveycodez comment below, but it is just a hack on top of another hack. middleware: false would clearly state that even if the file exists, it is not mean to be loaded.

[daveycodez]

I just use this:

    output: "export",
    pageExtensions: ["jsx", "tsx"],

Since all my API Routes and middleware are "ts" they get ignored

[zizzkata]

There should be a feature that let's you exclude paths. This is so basic, why is this not here by default.
Simply using webpack doesn't get you passed 'Collecting page data' check during build. At least disable api routes during static export.