初识 Next.js 并用 Next Cli 创建第一个项目吧

Next.js
, ,

前言

Next.js 是一个基于 React 的流行前端框架，旨在提供丰富的开发体验和高性能的应用程序。通过简化复杂的配置，Next.js 使开发者能够更加轻松地构建现代 Web 应用。

Next.js 的创始人 Guillermo Rauch 是一位经验丰富的前端工程师，他一直致力于开发者工具的改进和开发效率的提升。随着 JavaScript 生态系统的不断发展，Guillermo 观察到开发者在构建现代 Web 应用时面临的诸多挑战，特别是在服务器端渲染（SSR）、静态站点生成（SSG）和前端性能优化方面。

为了应对这些挑战，Guillermo 和他的团队于 2016 年推出了 Next.js，这一基于 React 的框架旨在简化 SSR 和 SSG 过程。Next.js 迅速在开发者社区中获得了广泛支持，成为构建 React 应用的首选工具之一。然而，Guillermo 认识到，单靠一个框架并不足以完全满足开发者的需求，因此需要一个配套的部署平台来简化应用的发布和运维。

如今，Next.js 已被许多大型网站所采用，包括 Netflix、GitHub、Uber、Ticketmaster、星巴克 和 TikTok。

基于 Next.js 的成功，Guillermo 在 2015 年创立了 Vercel（最初名为 Zeit），以提供一个专为前端开发者设计的全托管平台。Vercel 的目标是让开发者更轻松地将 Next.js 应用及其他框架的应用部署到全球 CDN，从而提供快速的加载速度和卓越的用户体验。

Vercel 在 2021 年 6 月的 C 轮融资中筹集了 1.02 亿美元。截至 2024 年 5 月，公司估值已达到 32.5 亿美元。

值得注意的是，Next.js 团队中的许多核心成员都在前端领域有着重要的影响力，例如 Webpack 和 SWC 的作者，以及许多来自 React 团队的核心成员也就职于 Vercel 并参与 Next.js 的维护。因此，Next.js 的发展与 React 社区息息相关，对整个前端生态系统有着深远的影响。

通过上述，足以看出 Next.js 的强大。

学习 Next.js 需要什么条件

如果你是前端初学者，那么我还是建议你从基础的HTML、CSS、JavaScript 学起，然后选择一门 MVVM 框架进行学习。然后就是 TypeScript 、Node.js 等。如果你不具备这些条件那么我不建议你学 Next.js。

前面说了 Next.js 是 React 的框架，如果你选择了 Vue 那么你就该去 Nuxt.js。

使用 Next CLI 创建项目

我们使用 create-next-app 脚手架创建项目。接下来脚手架工具会问你一系列问题，你可以根据自身需求进行选择。

image-20240829210220183

  • 是否启用 TypeScript
  • 是否启用 ESlint 对代码进行检查
  • 是否启用 Tailwind CSS
  • 是否以 src / 为项目目录
  • 后面的都选是即可。

运行项目

查看 package.json 

1
2
3
4
5
6
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
},

可以看到脚本命令有 dev、build、start、lint，对应着开发、构建、运行、检查代码。

那么就用 npm run dev 启动项目吧。默认端口跑在 3000 上。

总结：使用 Next.js 官方提供的脚手架工具创建一个项目就是这么的简单。那么接下来让我们手动创建一个项目看看吧。

手动创建项目

日常开发中我们直接用脚手架创建 Next.js 项目即可。但为了了解 Next.js 依赖什么手动创建的方式可以加深我们对 Next.js 的印象。

1
npm install next@latest react@latest react-dom@latest

安装完后，在 package.json 添加以下内容

1
2
3
4
5
6
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
},

创建 app 文件夹，在该文件下创建 layout.js 和 page.js文件

1
2
3
4
5
6
7
8
// app/layout.tsx
export default function RootLayout({ children }) {
	return (
		<html lang="zh-CN">
			<body>{children}</body>
		</html>
	);
}
1
2
3
4
5
6
7
8
9
// app/page.tsx
export default function RootLayout({ children }) {
	return (
		<html lang="zh-CN">
			<body>{children}</body>
		</html>
	);
}

运行项目

现在运行 npm run dev，正常渲染则表示运行成功：

image-20240829214014011

Next.js CLI

通过查看 package.json 我们可以知道当我们运行 npm run dev 的时候，本质执行的是 next dev 命令。next 命令就来自 Next.js CLI。它可以帮你启动、构建、开发等项目。

我们可以运行 npx next -h 查看 CLI 提供命令。

image-20240829214657366

可以看到有很多的命令，下面介绍一些常用的命令。

next build

执行 next build 将会创建生产优化版本

1
npx next build

构建输出如下：

image.png

从上图可以看出，构建时会输出每条路由的信息，比如 Size 和 First Load JS。注意这些值指的都是 gzip 压缩后的大小。其中 First Load JS 会用绿色、黄色、红色表示，绿色表示高性能，黄色或红色表示需要优化。

这里要解释一下 Size 和 First Load JS 的含义。正常我们开发的 Next.js 项目，其页面表现类似于单页应用，即路由跳转（我们称之为“导航”）的时候，页面不会刷新，而会加载目标路由所需的资源然后展示，所以：

1
加载目标路由一共所需的 JS 大小 = 每个路由都需要依赖的 JS 大小 + 目标路由单独依赖的 JS 大小

其中：

  • 加载目标路由一共所需的 JS 大小就是 First Load JS
  • 目标路由单独依赖的 JS 大小就是 Size
  • 每个路由都需要依赖的 JS 大小就是图中单独列出来的 First load JS shared by all

next dev

在开发模式下，使用 next dev 运行程序，它会有热重载、错误报告等功能

next start

在生产环境下，使用 next start运行程序。不过要先执行 next build构建出生产代码。

next lint

它会使用 ESLint 检查目录下所有的文件。

next info

它会打印当前系统相关信息，可以报告 Next.js 程序的 bug。如果你在开发中遇到了 bug，可以将打印的信息复制到 Github 提价一个 issue 给 Next.js 团队。

总结

我们首先介绍了关于 Next.js 的相关信息，同时介绍了它的创始人和维护它的公司。

然后我们讲解了用两种方式创建 Next.js 项目，分别是自动创建和手动创建。后面介绍了 Next.js CLI 的命令。

参考

  1. Next.js 开发指南