Next.js 项目——从入门到入门（Eslint+Prettier）
Next.js官方文档地址
什么是 Next.js
这是一个用于生产环境的 React 框架。
Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能，无需任何配置。
功能：
| 功能 | 说明 |
|---|---|
| 零配置 | 自动编译并打包。从一开始就为生产环境而优化 |
| 混合模式： SSG 和 SSR | 在一个项目中同时支持构建时预渲染页面（SSG）和请求时渲染页面（SSR） |
| 增量静态生成 | 在构建之后以增量的方式添加并更新静态预渲染的页面 |
| 支持 TypeScript | 自动配置并编译 TypeScript |
| 快速刷新 | 快速、可靠的实时编辑体验，已在 Facebook 级别的应用上规模上得到验证 |
| 基于文件系统的路由 | 每个 pages 目录下的组件都是一条路由 |
| API 路由 | 创建 API 端点（可选）以提供后端功能 |
| 内置支持 CSS | 使用 CSS 模块创建组件级的样式。内置对 Sass 的支持 |
| 代码拆分和打包 | 采用由 Google Chrome 小组创建的、并经过优化的打包和拆分算法 |
更多功能： 支持 环境变量、 预览模式、 自定义 head 标签、 自动使用 polyfills 等等
项目创建
使用 pnpm 创建一个默认的 Next.js 应用，代码如下：
pnpx create-next-app nextjs-blog --use-pnpm
接下来会有一些option操作，可以根据自身需求来选择，这里的选择如下：
启动项目的时候需要注意一下，当前 next 包用到的 node 版本。通过 node_modules/next/package.json 来查看一下，如图：
需要项目的 node 版本至少满足 next 包的 node 版本，因此本项目使用 v18 的 Node.js，可以通过 node -v 检查版本，如图：
项目运行
在项目创建的时候，依赖已经安装好了，所以直接运行即可。这里使用的是 pnpm，当然可以用 npm 或者 yarn 工具。
cd nextjs-blog
pnpm dev
# or
yarn dev
# or
npm run dev
将在3000端口上启动 Next.js 应用程序，在浏览器打开http://localhost:3000/，可以看到demo成功运行，如图：
引擎锁定
在启动项目前检查过 Node.js 版本，可以像 next 包一样通过 engines 字段指定工具的特定版本。
{
"name": "nextjs-blog",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.0.1"
},
"devDependencies": {
"eslint": "^8",
"eslint-config-next": "14.0.1"
},
"engines": {
"node": ">=18.17.0"
}
}
代码规范工具与格式化
为了设定一个标准，供项目的所有贡献者使用，以保持代码风格一致并遵循基本的最佳实践，本项目将使用两个工具：
- Eslint - 代码规范工具
- Prettier - 代码格式化工具
ESLint
- 下载 ESLint 相关依赖
pnpm install eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react @next/eslint-plugin-next -D
| 依赖 | 说明 |
|---|---|
| eslint | ESLint 核心库 |
| eslint-config-prettier | 关掉所有和 Prettier 冲突的 ESLint 的配置 |
| eslint-plugin-prettier | 将 Prettier 的 rules 以插件的形式加入到 ESLint 里面 |
| eslint-plugin-react | 为 React 使用 ESlint 的插件 |
| @next/eslint-plugin-next | 为 Next 使用 ESlint 的插件 |
- 安装 Vscode 插件（ESLint）
- 配置 ESLint（.eslintrc.json）
{
"extends": "next/core-web-vitals"
}
- 使用 ESLint
package.json 文件的 scripts 命令中：
可以测试一下当前配置，通过运行以下命令：
pnpm lint
会得到如图提示：
Prettier
- 下载 prettier 相关依赖
pnpm install prettier -D
- 安装 Vscode 插件（Prettier）
3. 配置 Prettier（.prettierrc）
.eslintrc.json
{
"extends": ["next/core-web-vitals", "prettier"]
}
.prettierrc
{
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"trailingComma": "none",
"bracketSpacing": true,
"bracketSameLine": false,
"arrowParens": "avoid",
"requirePragma": false
}
.prettierignore
/dist/*
/build
.local
.next
/node_modules/**
**/*.svg
**/*.sh
/public/*
*.yaml
*.json
*.md
.prettierrc
此文件是不希望 prettier 在这些目录中浪费任何资源去进行格式化，也可以使用类似 *.html 这样的方式去忽略文件。
现在，可以在 package.json 添加新的 script ：
可以测试一下当前配置，通过运行以下命令：
pnpm prettier
会得到如图提示：
