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

1. 下载 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 的插件

2. 安装 Vscode 插件（ESLint）

3. 配置 ESLint（.eslintrc.json）

{
  "extends": "next/core-web-vitals"
}

4. 使用 ESLint

package.json 文件的 scripts 命令中：

可以测试一下当前配置，通过运行以下命令：

pnpm lint

会得到如图提示：

Prettier

1. 下载 prettier 相关依赖

pnpm install prettier -D

2. 安装 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

会得到如图提示：