一、安装Node.js

1.打开Node.js官网，点击下载”18.17.0 LTS”（长期支持版本）

插图1

2.运行安装程序，按照向导的默认设置一直”下一步”即可，安装完成后打开终端

1
2
3
# 终端中检测是否安装成功，查看版本
node -v
npm -v

二、初始化项目

Next.js全栈项目初始化通常涉及到前端和后端的设置，我们使用Express作为后端框架。

1.打开命令行窗口，创建项目

1
2
3
4
5
6
7
8
# 创建新目录
mkdir my_nextjs_fullstack_project

# 打开新目录
cd my_nextjs_fullstack_project

# 初始化npm项目
npm init -y

2.安装Next.js和Express

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 安装命令
npm install next react react-dom express

# 创建页面文件夹
mkdir pages

# 创建项目首页，并编辑添加以下文件内容
// pages/index.js
import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Hello Next.js!</h1>
    </div>
  );
};

export default Home;

3.创建Express后端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 在项目根目录新建server.js文件，编辑并添加以下内容
// server.js
const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

4.添加启动脚本

1
2
3
4
# 编辑package.json文件中的scripts部分
"scripts": {
  "dev": "node server.js"
}

5.启动应用，访问：http://localhost:3000 查看Next.js应用

1
npm run dev

三、安装ESLint和Prettier

1.在项目根目录下执行终端命令，安装ESLint和Prettier

1
2
3
4
5
6
7
8
9
10
11
# 安装
npm install --save-dev eslint prettier

# 初始化ESLint配置
npx eslint --init

# 安装ESLint插件
npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks

# 安装Prettier插件
npm install --save-dev eslint-config-prettier eslint-plugin-prettier

2.配置文件：.eslintrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  // nextjs官方推荐
  "env": {
    "es2020":true,
    "es6": true,
    "node": true
  },
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "warn"
  }
}

3.创建Prettier配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 在项目根目录下新建.prettierrc.js文件，添加基本配置
module.exports = {
  singleQuote: false,   // 使用双引号
  printWidth: 100,      // 设置行宽度为100
  semi: true,           // 使用分号
  trailingComma: 'all', // 添加尾部逗号

  // TypeScript相关配置
  arrowParens: 'always', // 箭头函数参数始终使用括号
  bracketSpacing: true,  // 在字面量声明的大括号中添加空格

  // IDE和代码编辑器集成
  useTabs: false,        // 使用空格替代Tab
  tabWidth: 2,           // 设置Tab键格式

  // 其它配置
  proseWrap: 'always',              // Markdown等设置
  htmlWhitespaceSensitivity: 'css', // CSS中的空白字符
  plugins: ['prettier-plugin-tailwindcss'],
};

四、安装Husky

1.在项目根目录下打开终端

1
2
# 安装Husky
npm install husky --save-dev

2.配置Git Hooks：package.json

1
2
3
4
5
6
# 添加husky字段
"husky": {
  "hooks": {
    "pre-commit": "npm run lint:fix"  # 同时运行ESLint和Prettier
  }
}

3.添加npm脚本

1
2
3
4
5
# 在scripts部分，添加脚本
"scripts": {
  "lint": "eslint .",
  "lint:fix": "npm run lint -- --fix"
}

五、安装Commitlint

1.在项目根目录下打开终端

1
2
# 安装Commitlint和相关插件
npm install @commitlint/cli @commitlint/config-conventional husky --save-dev

2.Commitlint配置：commitlint.config.js

1
2
3
4
5
6
7
8
9
10
# 新建commitlint.config.js文件
touch commitlint.config.js

# 使用VSCode打开配置文件
code commitlint.config.js

# 示例配置
module.exports = {
  extends: ['@commitlint/config-conventional'],
};

3.配置Git Hooks（使用Husky）：package.json

1
2
3
4
5
6
# 添加husky字段
"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}