使用 Next.js Cli 快速搭建和运行 Web 应用
作者：云牧
Next.js 提供了便捷的 create-next-app 脚手架，它支持 TypeScript、ESLint 等功能，无需配置即可自动编译和打包。
环境要求：本文基于 Next.js v14 最新版本，需要Node.js 18.17 或更高版本。
使用 cli 自动创建项目
创建项目
使用 create-next-app 是最快捷的创建项目方式：
npx create-next-app@latest
运行此命令后，系统会提示您设置项目名称和选择一些选项，如 TypeScript、ESLint 的使用等。初学者可以选择默认设置。
运行项目
在项目根目录的 package.json 中，您会看到以下脚本命令：
- npm run dev：用于开发环境。
- npm run build：构建生产环境的代码。
- npm run start：运行生产环境的项目。
- npm run lint：执行代码检查。
项目下运行 npm run dev，打开浏览器访问 http://localhost:3000，若页面显示正常，则表示项目成功运行。
示例代码
Next.js 在 GitHub 上提供了丰富的示例代码，如 with-redux、api-routes-cors 等。您可以通过以下命令直接基于示例代码创建项目：
npx create-next-app --example with-redux your-app-name
手动创建项目
虽然大部分情况下我们不需要手动创建项目，但了解手动创建的过程有助于理解 Next.js 项目的基础结构。
创建文件夹并安装依赖
创建文件夹（例如 next-app-manual），进入目录，安装以下依赖：
npm install next@latest react@latest react-dom@latest
添加脚本
编辑 package.json，添加以下 scripts 脚本：
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}创建目录与文件
在 next-app-manual 目录下创建 app 文件夹，并在其中添加 layout.js 和 page.js：
// app/layout.js
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
// app/page.js
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}运行项目
执行 npm run dev，如果页面正常渲染，则表示项目运行成功。
Next cli
在 package.json 文件中，当我们运行 npm run dev 命令时，实际上是在执行 next dev。以下是 Next.js CLI 常用命令的快速概览。
CLI 命令快速访问
要查看所有可用的 CLI 命令，可以在命令行中执行以下命令：
npx next -h
由于使用 npx 创建的项目避免了全局安装 create-next-app，本地并不会安装 next 命令。如果需要执行 next 命令，请在命令前加上 npx。
该命令会显示所有可用的 next 命令选项，其中 -h 是 --help 的简写。
next dev
开发模式下，使用以下命令运行程序：
npx next dev
此命令具有热加载、错误报告等功能。默认运行在 http://localhost:3000。
next build
next build 命令用于创建项目的生产优化版本。
npx next build
构建输出说明
构建时，会显示每条路由的信息，如 Size 和 First Load JS。这些值表示 gzip 压缩后的大小，其中 First Load JS 会以绿色、黄色或红色标识性能等级。
- Size：到达特定路由时下载的资源大小，只包含该路由的依赖项。
- First Load JS：加载页面时下载的资源总大小。
- First load JS shared by all：所有路由共享的 JS 大小。
关系如下：
First Load JS = Size + First load JS shared by all
例如，如果 / 路由的 First Load JS 为 89 kB，Size 为 5.16 kB，则共享的 JS 大小为 83.9 kB。
生产性能分析
使用以下命令开启 React 的生产性能分析（需要 Next.js v9.5 或更高版本）：
需要需要浏览器有一个 React 插件：
npx next build --profile npm run start
构建调试
npx next build --debug
此命令会输出更详细的构建信息，如 rewrites、redirects、headers 等。
next start
生产模式下，使用以下命令运行程序：
npx next start
在运行此命令之前，需要先执行 next build 生成生产代码。默认运行在 http://localhost:3000。
端口设置
npx next start -p 4000
next lint
执行以下命令进行 ESLint 检查：
npx next lint
默认检查 pages/、app/、components/、lib/、src/ 目录下的文件。
指定检查目录
npx next lint --dir utils
next info
打印当前系统相关信息，以便报告 Next.js 程序的 bug：
npx next info
这些信息可帮助开发者或 Next.js 官方团队排查问题。
以上就是使用 Next.js Cli 快速搭建和运行 Web 应用的详细内容，更多关于Next.js Cli 快速搭建运行 Web 应用的资料请关注脚本之家其它相关文章！