nrwl--nx/packages/next/docs/server-next-executor-examples.md

title, description

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

project.json:

//...
{
  "name": "acme",
  "$schema": "node_modules/nx/schemas/project-schema.json",
  "sourceRoot": ".",
  "projectType": "application",
  "targets": {
    //...
    "serve": {
      "executor": "@nx/next:server",
      "defaultConfiguration": "production",
      "options": {
        "buildTarget": "acme:build",
        "dev": true
      }
    }
    //...
  }
}

nx run acme:serve

Examples

For Next.js Standalone projects

Default configuration

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

    "serve": {
      "executor": "@nx/next:server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "acme:build",
        "dev": true
      },
      "configurations": {
        "development": {
          "buildTarget": "acme:build:development",
          "dev": true
        },
        "production": {
          "buildTarget": "acme:build:production",
          "dev": false
        }
      }
    },

Choosing your bundler

Turbopack is a cutting-edge bundler designed for JavaScript and TypeScript. To read more about supported features see Next.js Turbopack Documentation

Important: Next.js 16 changed the default bundler

• Next.js 15 and below: Webpack is the default bundler. Use --turbo to enable Turbopack.
• Next.js 16 and above: Turbopack is the default bundler. Use --webpack to use Webpack instead.

Using Turbopack in Next.js 15 and below

Append the --turbo flag while executing the Nx development server:

nx run acme:serve --turbo

Or update the serve options to include turbo:

    "serve": {
      "executor": "@nx/next:server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "acme:build",
        "dev": true
      },
      "configurations": {
        "development": {
          "buildTarget": "acme:build:development",
          "dev": true,
          "turbo": true
        }
      }
    }

Using Webpack in Next.js 16 and above

If you need to use Webpack instead of the default Turbopack in Next.js 16+:

nx run acme:serve --webpack

Or update the serve options to include webpack:

    "serve": {
      "executor": "@nx/next:server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "acme:build",
        "dev": true
      },
      "configurations": {
        "development": {
          "buildTarget": "acme:build:development",
          "dev": true,
          "webpack": true
        }
      }
    }

Adding keep alive timeout

When using Nx with Next.js behind a downstream proxy, it's important to make sure that the keep-alive timeouts of Next.js' HTTP server are set to longer durations than the timeouts of the proxy. If you don't do this, Node.js will unexpectedly end TCP connections without notifying the proxy when the keep-alive timeout is reached. This can lead to a proxy error when the proxy tries to reuse a connection that Node.js has already terminated.

To configure timeout values (in milliseconds) you can:

Pass --keepAliveTimeout

nx run acme:serve --keepAliveTimeout 60000

Updating the serve options to include keepAliveTimeout.

    "serve": {
      "executor": "@nx/next:server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "acme:build",
        "dev": true
      },
      "configurations": {
        "development": {
          "buildTarget": "acme:build:development",
          "dev": true,
          "keepAliveTimeout": 60000
        },
        //
    }
  }

nx run acme:serve