nx/packages/next/docs/build-next-executor-examples.md

title	description
Next.js builder executor examples	This page contains examples for the @nx/next:build executor.

project.json:

//...
{
  "name": "acme",
  "$schema": "node_modules/nx/schemas/project-schema.json",
  "sourceRoot": ".",
  "projectType": "application",
  "targets": {
    //...
    "build": {
      "executor": "@nx/next:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/acme"
      }
    }
    //...
  }
}

nx run acme:build

Examples

For Next.js Standalone projects

{% tabs %} {% tab label="Default configuration" %}

This is the default configuration for Next.js standalone projects. Our @nx/next:build executor is integrated to use Next.js' CLI. You can read more about the build options at Next.js CLI Options

    "build": {
      "executor": "@nx/next:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/acme"
      },
      "configurations": {
        "development": {
          "outputPath": "."
        },
        "production": {}
      }
    },

{% /tab %} {% tab label="Enable debug" %}

You can create a debug build for more verbose output by:

Using the --debug flag

nx run acme:build:development --debug

Updating the build options to include debug.

    "build": {
      "executor": "@nx/next:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/acme"
      },
      "configurations": {
        "development": {
          "outputPath": ".",
          "debug": true
        },
        "production": {}
      }
    },

nx run acme:build:development

{% /tab %}

{% tab label="Adding profiling" %}

You can enable profiing for React by

Using the --profile flag

nx run acme:build:production --profile

Updating the build options to include profile.

    "build": {
      "executor": "@nx/next:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/acme"
      },
      "configurations": {
        "development": {
          "outputPath": ".",
        },
        "production": {
          "profile": true
        }
      }
    },

nx run acme:build:production

{% /tab %}

{% tab label="Enable experimental app only" %}

Since Next.js 13 the app/ directory it is reserved. You can enable to build only app/ routes by

Using the --experimentalAppOnly flag

nx run acme:build:production --experimentalAppOnly

Updating the build options to include experimentalAppOnly.

    "build": {
      "executor": "@nx/next:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/acme"
      },
      "configurations": {
        "development": {
          "outputPath": ".",
          "experimentalAppOnly": true
        },
        "production": {}
      }
    },

nx run acme:build:production

{% /tab %}

{% /tabs %}