Next.js how to ignore a complete folder in app?

Question

On next 13, app/api folder creates an error during build when nextConfig.output is "export".

In my project, I need different build type depending on environnement variable.

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

When I run build with nextConfig.output as "export" I got following error:

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

src/app/api/revalidate/route.ts file

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;

Reproducible repository

Here is a repository to reproduce this error https://github.com/zeckaissue/next-export-api-crash

Can you show /api/revalidate/route? – Youssouf Oumar Jun 05 '23 at 10:13 — Youssouf Oumar, Jun 05 '23 at 10:13

score 3 · Accepted Answer · answered Jun 11 '23 at 09:10

I found a workaround with ignore-loader. But maybe there is a better way to achieve my goal with a built-in feature of next.js

Here is my updated next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: process.env.NEXT_OUTPUT_MODE,
  /**
   *
   * @param {import('webpack').Configuration} config
   * @param {import('next/dist/server/config-shared').WebpackConfigContext} context
   * @returns {import('webpack').Configuration}
   */
  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;
  },
};

module.exports = nextConfig;

@Zecka, when you do npm run build so the folder is not included right? are you getting this error when u try to access it Application error: a client-side exception has occurred (see the browser console for more information). — ANOOP NAYAK, Jul 24 '23 at 09:08

score 0 · Answer 2 · answered Jun 15 '23 at 13:22

0

You can use the ignore option in the Next.js configuration file (next.config.js). You will have to create one config file if you havent already. Open the next.config.js file and add the following code:

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.module.rules.push({
        test: /YOUR FOLDER NAME\/.*/,
        loader: 'ignore-loader',
      });
}

answered Jun 15 '23 at 13:22

Syed Asif

73
2
9

this is basically the same solution than mine. Not sure why did you add "isServer" condition ? – ZecKa Jun 16 '23 at 07:19
The isServer option is added in the webpack configuration to differentiate between server-side and client-side builds in Next.js. Thought this may help you ! – Syed Asif Jun 16 '23 at 12:09

score -4 · Answer 3 · answered Jun 12 '23 at 21:13

-4

Here is my answer.

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: process.env.NEXT_OUTPUT_MODE,
  exclude: [/node_modules/, /api/], // Add this line to exclude the api folder
};

module.exports = nextConfig;

answered Jun 12 '23 at 21:13

Ari Setiawan

1
3

I seems that, there is no "exclude" proerty on next 13 config https://nextjs.org/docs/app/api-reference/next-config-js. Try on reproducible repository, this solution will not work – ZecKa Jun 13 '23 at 06:02
Several of your answers appear likely to have been entirely or partially written by AI (e.g., ChatGPT), and the issue here noted by @ZecKa indicates that this is a GPT "hallucination" . Please be aware that [posting of AI-generated content is banned here](//meta.stackoverflow.com/q/421831). If you used an AI tool to assist with any answer, I would encourage you to delete it. Thanks! – NotTheDr01ds Jun 15 '23 at 13:51
**Readers should review this answer carefully and critically, as AI-generated information often contains fundamental errors and misinformation.** If you observe quality issues and/or have reason to believe that this answer was generated by AI, please leave feedback accordingly. The moderation team can use your help to identify quality issues. – NotTheDr01ds Jun 15 '23 at 13:51

Next.js how to ignore a complete folder in app?

src/app/api/revalidate/route.ts file

Next.config.js

Reproducible repository

3 Answers3