Next.js CLI 命令详解：开发、构建与部署全指南

Next.js 作为现代 React 框架，提供了强大的命令行工具（CLI）来简化开发流程。本文将全面解析 Next.js CLI 的各项功能，帮助开发者高效使用这些命令进行项目开发、构建和部署。

CLI 基础使用

Next.js CLI 的基本命令格式如下：

npx next [command] [options]

运行 next 不加任何命令时，默认等同于 next dev 命令，会启动开发服务器。

核心命令详解

1. 开发模式：next dev

next dev 启动开发服务器，支持热模块替换（HMR）和错误报告等开发特性。

常用选项：

• -p/--port: 指定端口（默认3000）
• -H/--hostname: 指定主机名（默认0.0.0.0）
• --turbopack: 使用Turbopack构建工具（实验性）
• --experimental-https: 启用HTTPS开发服务器

HTTPS开发示例：

next dev --experimental-https \
  --experimental-https-key ./certs/key.pem \
  --experimental-https-cert ./certs/cert.pem

2. 生产构建：next build

next build 创建生产环境优化构建，输出包含路由信息：

Route (app)              Size     First Load JS
┌ ○ /                    2.5 kB          80 kB
└ λ /api/hello           0 B             78 kB

构建指标说明：

• Size: 客户端导航时下载的资源大小
• First Load JS: 服务端渲染时下载的JS大小
• 符号说明:
  • ○ 静态生成内容
  • λ 按需服务端渲染

常用选项：

• -d/--debug: 显示详细构建信息
• --profile: 启用React性能分析
• --no-lint: 禁用ESLint检查
• --experimental-app-only: 仅构建App Router路由

3. 生产启动：next start

next start 启动生产服务器，需先执行 next build。

常用选项：

• -p/--port: 指定端口
• -H/--hostname: 指定主机名
• --keepAliveTimeout: 设置连接保持时间

4. 环境信息：next info

next info 输出系统环境信息，便于问题排查：

Operating System:
  Platform: linux
  Arch: x64
Binaries:
  Node: 18.12.1
  npm: 9.1.2
Relevant Packages:
  next: 13.1.1
  react: 18.2.0

5. 代码检查：next lint

next lint 对项目进行ESLint检查，支持自动修复：

next lint --fix --dir components pages

常用选项：

• --fix: 自动修复可修复的问题
• --strict: 使用严格ESLint配置
• -d/--dir: 指定检查目录

6. 遥测设置：next telemetry

Next.js 收集匿名使用数据以改进产品，可通过以下命令管理：

next telemetry disable  # 禁用数据收集
next telemetry enable   # 启用数据收集

实用技巧与最佳实践

1. 端口配置：

   • 通过环境变量设置：PORT=4000 next dev
   • 通过参数设置：next dev -p 4000

2. HTTPS开发：

   • 自签名证书：next dev --experimental-https
   • 自定义证书：提供key和cert文件路径

3. 构建优化：

   • 使用 --profile 分析React性能
   • 调试构建问题使用 -d 查看详细输出

4. 生产部署：

   • 始终先构建再启动：next build && next start
   • 考虑使用 --keepAliveTimeout 优化连接

总结

Next.js CLI 提供了一套完整的工具链，覆盖了从开发到部署的全生命周期。掌握这些命令及其选项能够显著提升开发效率，帮助构建高性能的Next.js应用。建议开发者根据项目需求，灵活组合使用这些命令，并关注实验性功能的最新进展。