Next.js - CLI

Next.js - Command Line Interface (CLI)

Next.js comes with a powerful Command Line Interface (CLI) accessible via the next command. It’s used for initializing, developing, building, and serving your Next.js applications.

You typically interact with the CLI through npm scripts defined in your package.json (e.g., npm run dev, npm run build) or directly using npx next <command>.

Getting Help

To see the list of available commands and general help:

npx next -h
# or
npm run next -- -h

To get help for a specific command (e.g., build):

npx next build -h

Core Commands

next dev

Starts the Next.js development server with hot code reloading, error reporting, and more.

# Usually run via npm script
npm run dev

# Or directly
npx next dev

Options:

• -p <port>: Specify a port number (e.g., npx next dev -p 4000). Default is 3000.
• -H <hostname>: Specify a hostname (e.g., npx next dev -H 0.0.0.0 to make it accessible on your network).

next build

Creates an optimized production build of your application. This compiles your code, bundles assets, optimizes images, prerenders static pages, and prepares serverless functions.

# Usually run via npm script
npm run build

# Or directly
npx next build

The output is placed in the .next directory. The build output provides insights into page sizes and rendering modes (Static, Server-Side Rendered (SSR), Incremental Static Regeneration (ISR)).

# Example build output snippet
npm run build

> my-app@0.1.0 build
> next build

  ▲ Next.js 14.x.x
  - Environments: .env.local
  - Linting and checking validity of types
  - Collecting page data...
  - Generating static pages (0/5) ...
  - Generating server components (5/5) ...
  - Compiling Route Handlers (1/1) ...
  - Generating static pages (5/5)

Route (app)                              Size     First Load JS
┌ ● /                                      1.2 kB         85.1 kB
├ ● /about                                 833 B          84.7 kB
├ ● /config-demo                           1.14 kB        87.1 kB
├ ● /posts                                 787 B          84.6 kB
└ ● /posts/[slug]                          1.1 kB         85 kB
+ First Load JS shared by all              83.9 kB
  ├ chunks/framework-....js                45.1 kB
  ├ chunks/main-....js                     29.1 kB
  ├ chunks/pages/_app-....js               0 B
  ├ chunks/webpack-....js                  1.6 kB
  └ css/....css                            8.17 kB

Route (api)                              Size     First Load JS
● /api/hello                             0 B              83.9 kB
● /api/users                             0 B              83.9 kB

(●) static page)

next start

Starts the Next.js production server after you have run next build. This serves the optimized application.

# Usually run via npm script
npm run start

# Or directly
npx next start

Options:

• -p <port>: Specify a port number (e.g., npx next start -p 8080). Default is 3000.

next lint

Runs ESLint checks configured for Next.js to find potential issues and enforce coding standards.

# Usually run via npm script
npm run lint

# Or directly
npx next lint

Initializing Projects

While not part of the next CLI itself, create-next-app is the standard tool for scaffolding new Next.js projects:

npx create-next-app@latest my-new-project

This sets up the project structure, necessary dependencies, and basic configuration files.