Is there a way to exclude an entire folder from being processed in Next.js application?

Question

Is there a way to exclude an entire folder from being processed in Next.js application?

When the "output" in nextConfig is set to "export", an error occurs in the app/api folder during the build process on the 13th.

In my project, I require different build types based on environment variables.

Is there a way to exclude the "api" folder from the build when the "output" is set to "export"?

Upon running the build with nextConfig.output as "export", the following error is encountered:

Export encountered errors on the 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 link to reproduce this issue https://github.com/zeckaissue/next-export-api-crash

javascript next.js static-site-generation

Answer 1

Answer №1

I managed to find a workaround using the ignore-loader package. However, I am wondering if there is a more efficient way to accomplish my objective by utilizing a built-in feature of next.js.

Below is the updated version of my next.config.js file:

/** @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;

Answer 2

I managed to find a workaround using the ignore-loader package. However, I am wondering if there is a more efficient way to accomplish my objective by utilizing a built-in feature of next.js.

Below is the updated version of my next.config.js file:

/** @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;

Answer 3

Answer №2

To utilize the ignore feature in your Next.js setup, you need to modify the next.config.js file. If you haven't created a configuration file yet, go ahead and create one now. Simply open the next.config.js file and include the code snippet provided below:

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

Answer 4

To utilize the ignore feature in your Next.js setup, you need to modify the next.config.js file. If you haven't created a configuration file yet, go ahead and create one now. Simply open the next.config.js file and include the code snippet provided below:

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

Answer 5

Answer №3

For NextJS 14.2.8 with the latest App Router update and API route handlers, you can implement the following solution:

Start by installing the ignore-loader:
```
npm install --save-dev ignore-loader
```
Add the ignore-loader configuration to your next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  webpack: (config) => {
    if (process.env.NODE_ENV == "production") {
      config.module.rules.push({
        test: /app\/api\/.*/,
        use: 'ignore-loader',
      });
    }
    return config;
  },
}

module.exports = nextConfig;

When running next dev in development mode and next build in production mode, this setup allows you to utilize API routes during development but exclude them when generating the static site.

Keep in mind that NextJS will still display /api/... routes during the static site build process. However, the actual /api/ files will not be included in the final build.

Answer 6

For NextJS 14.2.8 with the latest App Router update and API route handlers, you can implement the following solution:

Start by installing the ignore-loader:
```
npm install --save-dev ignore-loader
```
Add the ignore-loader configuration to your next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  webpack: (config) => {
    if (process.env.NODE_ENV == "production") {
      config.module.rules.push({
        test: /app\/api\/.*/,
        use: 'ignore-loader',
      });
    }
    return config;
  },
}

module.exports = nextConfig;

When running next dev in development mode and next build in production mode, this setup allows you to utilize API routes during development but exclude them when generating the static site.

Keep in mind that NextJS will still display /api/... routes during the static site build process. However, the actual /api/ files will not be included in the final build.

Is there a way to exclude an entire folder from being processed in Next.js application?

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

Next.config.js

Reproducible repository

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble interacting with the "Continue" button on PayPal while using Selenium

How can I convert a string number with leading zeros into a string in a node.js environment?

AngularJS Chart.js Element Instances

Organizing a Collection of Likes within an AngularJS Service

Jest tests are failing because React is not defined

Step-by-step guide for properly transferring PHP MySQL data to ChartJs

Is employing setTimeout a legitimate technique for circumventing a stack overflow issue when implementing callbacks?

Updating all the direct components within the corresponding category with jQuery

Expand your dropdown options with a Popup Input feature in the ComboBox to seamlessly add a 'New Option'

Transferring an Applescript list to ExtendScript in Javascript as an array for use in InDesign

Tips for identifying the version of a package that is installed using a package-lock.json file containing lockfileVersion = 3

Issues with form submission and JavaScript functionality have been detected in Internet Explorer, Firefox, and Safari, but are functioning properly in Chrome

Adding data to a pre-made JavaScript file template to create a fresh document

Bootstrap's square-shaped columns

How can I enhance this conversion function from an Array to an Object in JavaScript?

Steps to halt webkit animation within a div located inside a circle:

Send back alternate HTML content if the request is not made via AJAX

What is the best method for locating the ID of a specific element tied to a dynamically generated button that presents profile information using javascript?

Retrieve all links with the class "execute" and list them below

Is there a way to utilize JavaScript in order to trigger a CSS animation to occur at a designated time during a video