《Next Hexagonal Starter》项目安装与配置指南

2025-04-17 17:04:49作者：庞眉杨Will

1. 项目基础介绍

《Next Hexagonal Starter》是一个基于Next.js框架的前端Web应用程序，采用了六边形架构（Hexagonal Architecture）的设计模式。该架构模式旨在将应用程序的业务逻辑（领域层）与外部关注点（如UI、数据库、框架等）分离开来，以增强系统的可测试性和可维护性。本项目主要使用TypeScript作为编程语言。

2. 项目使用的关键技术和框架

Next.js: 用于构建服务端渲染的React应用程序的框架。
TypeScript: 是JavaScript的一个超集，添加了静态类型选项。
TailwindCSS: 一个功能类优先的CSS框架，用于快速UI开发。
DaisyUI: 基于TailwindCSS的组件库。
Cypress: 用于端到端测试的框架。
Jest: 用于单元测试的JavaScript测试框架。
Testing Library: 用于测试React组件的库。
ESLint: 用于识别和报告JavaScript代码中的模式匹配。
Prettier: 用于代码格式化的工具。
Husky: 用于配置git钩子的工具。
Commitlint: 用于规范git提交信息的工具。

3. 项目安装和配置的准备工作

在开始安装和配置项目之前，请确保您的开发环境中已经安装以下依赖：

Node.js（推荐使用LTS版本）
npm或yarn包管理器

详细安装步骤

克隆项目

在您的本地开发环境中，使用以下命令克隆项目：
```
git clone https://github.com/carlosazaustre/next-hexagonal-starter.git
```
安装依赖

切换到项目目录中，使用以下命令安装所有依赖项：
```
cd next-hexagonal-starter
npm install
```
或者如果您使用yarn：
```
yarn install
```
配置环境变量

在项目根目录中创建一个.env.local文件，并添加您需要的环境变量。例如：
```
NEXT_PUBLIC_API_URL=https://jsonplaceholder.typicode.com
```
运行项目

使用以下命令启动开发服务器：
```
npm run dev
```
或者如果您使用yarn：
```
yarn dev
```
运行后，您应该能够在浏览器中访问http://localhost:3000来查看运行中的应用程序。
配置ESLint和Prettier

确保您的编辑器支持ESLint和Prettier插件，并正确配置了它们。这将帮助您保持代码风格的一致性和质量。
运行测试

使用以下命令运行单元测试和端到端测试：
```
npm test
```
或者如果您使用yarn：
```
yarn test
```
确保所有测试都通过，这有助于验证代码的正确性。