rsnext/docs/02-app/02-api-reference/08-next-cli.mdx
Vũ Văn Dũng a680571d04
Remove the left padding in next info output (#55704)
## Why?

Although the left padding makes the output looks good in the terminal, it causes this weird alignment in almost all bug reports:

```yaml
Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 18.12.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.5.2-canary.2
      eslint-config-next: 13.5.2
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.2.2
    Next.js Config:
      output: N/A
```

If I want it to look nice in the bug report

```yaml
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.0.0: Thu Aug 17 21:23:02 PDT 2023; root:xnu-10002.1.11~3/RELEASE_ARM64_T8112
Binaries:
  Node: 20.3.1
  npm: 9.6.7
  Yarn: 1.22.19
  pnpm: 8.6.12
Relevant Packages:
  next: 13.5.2
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A
```

I have to paste this to a text editor and manually remove the first four spaces on every lines.

### How?

This PR removes that four-space padding to make future bug reports look a bit nicer.
2023-09-21 18:26:43 +00:00

179 lines
6.3 KiB
Text
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Next.js CLI
description: The Next.js CLI allows you to start, build, and export your application. Learn more about it here.
---
{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
The Next.js CLI allows you to start, build, and export your application.
To get a list of the available CLI commands, run the following command inside your project directory:
```bash filename="Terminal"
npx next -h
```
_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher)_
The output should look like this:
```bash filename="Terminal"
Usage
$ next <command>
Available commands
build, start, export, dev, lint, telemetry, info
Options
--version, -v Version number
--help, -h Displays this message
For more information run a command with the --help flag
$ next build --help
```
You can pass any [node arguments](https://nodejs.org/api/cli.html#cli_node_options_options) to `next` commands:
```bash filename="Terminal"
NODE_OPTIONS='--throw-deprecation' next
NODE_OPTIONS='-r esm' next
NODE_OPTIONS='--inspect' next
```
> **Good to know**: Running `next` without a command is the same as running `next dev`
## Build
`next build` creates an optimized production build of your application. The output displays information about each route.
- **Size** The number of assets downloaded when navigating to the page client-side. The size for each route only includes its dependencies.
- **First Load JS** The number of assets downloaded when visiting the page from the server. The amount of JS shared by all is shown as a separate metric.
Both of these values are **compressed with gzip**. The first load is indicated by green, yellow, or red. Aim for green for performant applications.
You can enable production profiling for React with the `--profile` flag in `next build`. This requires [Next.js 9.5](https://nextjs.org/blog/next-9-5):
```bash filename="Terminal"
next build --profile
```
After that, you can use the profiler in the same way as you would in development.
You can enable more verbose build output with the `--debug` flag in `next build`. This requires Next.js 9.5.3:
```bash filename="Terminal"
next build --debug
```
With this flag enabled additional build output like rewrites, redirects, and headers will be shown.
## Development
`next dev` starts the application in development mode with hot-code reloading, error reporting, and more:
The application will start at `http://localhost:3000` by default. The default port can be changed with `-p`, like so:
```bash filename="Terminal"
npx next dev -p 4000
```
Or using the `PORT` environment variable:
```bash filename="Terminal"
PORT=4000 npx next dev
```
> **Good to know**: `PORT` cannot be set in `.env` as booting up the HTTP server happens before any other code is initialized.
You can also set the hostname to be different from the default of `0.0.0.0`, this can be useful for making the application available for other devices on the network. The default hostname can be changed with `-H`, like so:
```bash filename="Terminal"
npx next dev -H 192.168.1.2
```
## Production
`next start` starts the application in production mode. The application should be compiled with [`next build`](#build) first.
The application will start at `http://localhost:3000` by default. The default port can be changed with `-p`, like so:
```bash filename="Terminal"
npx next start -p 4000
```
Or using the `PORT` environment variable:
```bash filename="Terminal"
PORT=4000 npx next start
```
> **Good to know**:
>
> -`PORT` cannot be set in `.env` as booting up the HTTP server happens before any other code is initialized.
>
> - `next start` cannot be used with `output: 'standalone'` or `output: 'export'`.
### Keep Alive Timeout
When deploying Next.js behind a downstream proxy (e.g. a load-balancer like AWS ELB/ALB) it's important to configure Next's underlying HTTP server with [keep-alive timeouts](https://nodejs.org/api/http.html#http_server_keepalivetimeout) that are _larger_ than the downstream proxy's timeouts. Otherwise, once a keep-alive timeout is reached for a given TCP connection, Node.js will immediately terminate that connection without notifying the downstream proxy. This results in a proxy error whenever it attempts to reuse a connection that Node.js has already terminated.
To configure the timeout values for the production Next.js server, pass `--keepAliveTimeout` (in milliseconds) to `next start`, like so:
```bash filename="Terminal"
npx next start --keepAliveTimeout 70000
```
## Lint
`next lint` runs ESLint for all files in the `pages/`, `app/`, `components/`, `lib/`, and `src/` directories. It also
provides a guided setup to install any required dependencies if ESLint is not already configured in
your application.
If you have other directories that you would like to lint, you can specify them using the `--dir`
flag:
```bash filename="Terminal"
next lint --dir utils
```
## Telemetry
Next.js collects **completely anonymous** telemetry data about general usage.
Participation in this anonymous program is optional, and you may opt-out if you'd not like to share any information.
To learn more about Telemetry, [please read this document](https://nextjs.org/telemetry/).
## Next Info
`next info` prints relevant details about the current system which can be used to report Next.js bugs.
This information includes Operating System platform/arch/version, Binaries (Node.js, npm, Yarn, pnpm) and npm package versions (`next`, `react`, `react-dom`).
Running the following in your project's root directory:
```bash filename="Terminal"
next info
```
will give you information like this example:
```bash filename="Terminal"
Operating System:
Platform: linux
Arch: x64
Version: #22-Ubuntu SMP Fri Nov 5 13:21:36 UTC 2021
Binaries:
Node: 16.13.0
npm: 8.1.0
Yarn: 1.22.17
pnpm: 6.24.2
Relevant packages:
next: 12.0.8
react: 17.0.2
react-dom: 17.0.2
```
This information should then be pasted into GitHub Issues.
In order to diagnose installation issues, you can run `next info --verbose` to print additional information about system and the installation of next-related packages.