初始Next.js

版本：

本系列next.js基于的是目前最新版本的 v14 版本，需要 Node.js 18.17 及以后版本

创建项目：

最快捷的创建 Next.js 项目的方式是使用 create-next-app脚手架，你只需要运行：

npx create-next-app@latest

&&

pnpm create next-app

&&

yarn create next-app

文件目录及其启动命令

开发的时候使用 npm run dev。

部署的时候先使用 npm run build 构建生产代码，再执行 npm run start 运行生产项目。

运行 npm run lint 则会执行 ESLint 语法检查。

执行 next build 将会创建项目的生产优化版本：输出如下

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

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

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

其中：

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

First Load JS = Size + First load JS shared by all

使用官方文档中的介绍就是：

• Size：导航到该路由时下载的资源大小，每个路由的大小只包括它自己的依赖项
• First Load JS：加载该页面时下载的资源大小
• First load JS shared by all：所有路由共享的 JS 大小会被单独列出来