Next.js 15+ 脚手架使用教程

Next.js 15+ 脚手架使用教程

nextjs-boilerplate 🚀 Next.js 15+ boilerplate with typescript, husky, lint-staged, eslint, prettier, jest, react-testing-library, storybook, ghaction and plop. 项目地址: https://gitcode.com/gh_mirrors/nex/nextjs-boilerplate

1. 项目目录结构及介绍

以下是nextjs-boilerplate项目的目录结构及其简介：

nextjs-boilerplate/
├── .github/                      # GitHub相关配置
├── .husky/                       # Husky Git钩子配置
├── .jest/                        # Jest测试配置
├── .plop/                        # Plop文件生成器配置
├── .storybook/                   # Storybook配置
├── __mocks__/                    # Jest模拟文件
├── public/                       # 公共静态文件，如图片、CSS等
├── src/                          # 源代码目录
│   ├── components/               # React组件
│   ├── pages/                    # Next.js页面
│   ├── styles/                   # 样式文件
│   ├── utils/                    # 工具函数
│   ├── env.d.ts                  # 环境变量类型声明
│   ├── next.config.mjs           # Next.js配置
│   ├── tailwind.config.js        # Tailwind CSS配置
│   └── tsconfig.json             # TypeScript配置
├── .gitignore                    # Git忽略文件
├── .prettierrc                   # Prettier代码格式化配置
├── .prettierignore               # Prettier忽略文件
├── .eslintrc.mjs                 # ESLint配置
├── jest.config.js               # Jest配置
├── jest.setup.js                # Jest设置文件
├── package.json                  # 项目依赖和脚本
├── pnpm-lock.yaml                # pnpm锁文件
├── postcss.config.js            # PostCSS配置
├── prettier.config.js            # Prettier配置
└── tailwind.config.js            # Tailwind CSS配置

• .github/: 包含GitHub Actions工作流文件等。
• .husky/: 包含Husky的配置文件，用于设置Git钩子。
• .jest/: Jest测试框架的配置文件。
• .plop/: Plop的配置文件，用于生成代码模板。
• .storybook/: Storybook的配置文件，用于展示组件文档。
• __mocks__: Jest的模拟文件存放目录。
• public/: 公共静态文件目录，如网站图标、图片等。
• src/: 源代码目录，包括组件、页面、样式、工具函数等。
• .gitignore: 指定Git应该忽略的文件和目录。
• .prettierrc: Prettier代码格式化配置。
• .prettierignore: 指定Prettier应该忽略的文件和目录。
• .eslintrc.mjs: ESLint代码质量工具的配置。
• jest.config.js: Jest测试框架的配置。
• jest.setup.js: Jest的设置文件，用于初始化测试环境。
• next.config.mjs: Next.js框架的配置。
• tsconfig.json: TypeScript配置文件。

2. 项目的启动文件介绍

启动文件主要包括package.json中的脚本，以下是启动项目的常用命令：

{
  "scripts": {
    "dev": "next dev", // 开发模式启动项目
    "build": "next build", // 构建项目，用于生产环境
    "start": "next start", // 启动构建后的项目
    "test": "jest", // 运行Jest测试
    "generate": "plop" // 运行Plop生成器
  }
}

使用以下命令启动项目：

npm run dev
# 或者
yarn dev
# 或者
pnpm dev

这将启动开发服务器，并通常在http://localhost:3000上监听。

3. 项目的配置文件介绍

以下是几个重要的配置文件及其功能的简要介绍：

• next.config.mjs: Next.js的配置文件，可以在这里自定义诸如页面扩展名、环境变量、中间件等设置。

• tailwind.config.js: Tailwind CSS的配置文件，用于自定义设计系统，如颜色、字体、间距等。

• jest.config.js: Jest的配置文件，用于配置测试环境、测试覆盖率、测试用例等。

• eslintrc.mjs: ESLint的配置文件，用于定义代码质量和风格指南，确保代码一致性。

• prettierrc: Prettier的配置文件，用于代码格式化，确保代码风格统一。

这些配置文件提供了项目开发所需的基础配置，可以根据项目需求进行自定义调整。

nextjs-boilerplate 🚀 Next.js 15+ boilerplate with typescript, husky, lint-staged, eslint, prettier, jest, react-testing-library, storybook, ghaction and plop. 项目地址: https://gitcode.com/gh_mirrors/nex/nextjs-boilerplate