Next.js - CLI

Quiz

Next.js Command Line Interface (CLI) is built-in tool used to develop, run, built and start Next.js applications. In this chapter, we will discuss Next.js CLI commands, the syntax of CLI commands, and examples of writing commands in Next.js CLI.

Next.js CLI Syntax
Next.js CLI Commands
Changing Default Port on Next.js CLI
Using HTTPS in Next.js Development Mode

Next.js CLI Syntax

The CLI of Next.js has two parts, [command] and [option].

npx next [command] [options]

command: Next.js has a set of predefined commands such as dev, build, start etc.
options: Each command in Next.js has a set of options. For example, `npx next dev -p 3001`, Here port number 3001 is an `option` of the `dev` command.

Next.js CLI Commands

Following is list of all commands used in Next.js CLI.

Commands	Description
dev	The dev command starts Next.js application in development mode with hot module reloading and error reporting features.
build	This creates an optimized production build for the application.
start	Starts the Next.js application in production mode. The application should be built before starting production mode.
info	This is used to print relevant information about the current system, which can be used to report Next.js bugs.
lint	The Lint command runs ESLint for all files in the Next.js directories. It also provides a guided setup to install any required dependencies if ESLint it is not already configured in your application.
telemetry	This is used to enable or disable sharing telemetry data about general usage with Next.js.

Changing Default Port on Next.js CLI

To run a Next.js application on specific port, you can use the `dev` command along with port number. Following is syntax to change default port number.

npx next dev -p 4000

After running the above command in your terminal, Next.js development mode will start running on `http://localhost:4000/`. Your default browser will open the page automatically. See the image for reference.

Example

Once your server is ready, paste the below code in the `app/page.tsx` file to see your website running on port 4000.

// app/page.tsx

export default function Home() {
    return (
        <div>
            <h1>Welcome to My Next.js App</h1>
            <p>This is the home page.</p>
        </div>
    );
  }

Output

In the output, you can see that Next.js server is running on port 4000.

Using HTTPS in Next.js Development Mode

By default, Next.js uses the HTTP protocol for developmental purposes. However, for testing certain features like webhooks or authentication, you can use HTTPS to have a secure environment on localhost. Next.js can generate a self-signed certificate with next dev using the --experimental-https flag. Following is the syntax for command.

npx next dev --experimental-https

When running the above command, Next.js uses `mkcert` to generate self-signed certificates for local development. This will create a CA root certificate stored in the directory.

Example

After running the command, paste the code below on `app/page.tsx`.

// app/page.tsx

export default function Home() {
    return (
        <div>
            <h1>Welcome to My Next.js App</h1>
            <p>This is the home page.</p>
        </div>
    );
  }

Output

You can see that in output we are getting a secure connection.

Print Page

Next.js - CLI

Table of Contents

Next.js CLI Syntax

Next.js CLI Commands

Changing Default Port on Next.js CLI

Example

Output

Using HTTPS in Next.js Development Mode

Example

Output