组长：你熟悉过 React，开发个 Next 项目模板吧，我：怎么扯上关系的？

最近工作安排我开发一个 Next.js 项目模板，心里默笑，React 用得少得都快忘光了，现在得搞 Next？虽然我曾是 React 的老用户，但转投 Vue 阵营已久，React 的点点滴滴早已一干二净。

不过，挑战归挑战，规矩还得照做。

我们通常会用内部工具来搭建新项目的雏形。长久不碰 React 的我，只能边复习边动手。过了 Next.js 文档和找度娘，最终还是根据公司的项目框架写出了第一个版本的企业级模板 —— V1：Next.js-Enterprise-Project-Template。

项目简介

这个项目模板是为初学者快速了解 Next.js 企业项目模板大体框架。通过这个模板，可以快速搭建一个标准化的企业项目，减少重复劳动，提高开发效率。模板中集成了多种现代化的开发工具和框架，确保项目的可维护性和扩展性。

项目特点

• 基于 Next.js 框架：利用 Next.js 强大的功能和灵活性，提供了服务器端渲染和静态站点生成的最佳实践。

• 使用 TypeScript：整个项目使用 TypeScript 编写，增强了代码的可维护性和可读性，提供了更好的开发体验。

• 企业级结构：参考公司现有项目的结构，确保代码组织合理，易于扩展和维护。

• 现代化工具链：集成了现代化的开发工具和库，提升开发效率。

项目要求

• pnpm：版本 >= 8

• Node.js：版本 >= v18

集成功能

这个模板集成了多种实用功能，确保项目的高效开发和维护：

• 标准项目目录：提供了一个标准化的项目目录结构，便于代码组织和管理。

• 环境配置：集成了环境配置管理，方便在不同环境下进行配置切换。

• Ant Design UI 框架：集成了 Ant Design UI 框架，提供丰富的 UI 组件，提升开发效率。

• 样式框架：集成了 Tailwind CSS 和 styled-components，提供灵活的样式管理方案。

• 状态管理：集成了 Zustand 轻量级状态管理框架，简化状态管理逻辑。

• Git 提交验证：集成了 Git 提交验证，确保代码提交的规范性。

• API 请求示例：提供了基本的 API 请求示例，方便快速上手。

• 重要包排序：整理了项目中重要的包，确保依赖关系清晰。

• Prettier 格式配置：集成了 Prettier 格式化配置，确保代码风格一致。

• Vitest 测试 ：集成了 Vitest 单元测试

快速开始

首先，运行开发服务器：

npm run dev# 或者pnpm dev

打开 http://localhost:3000 查看结果。

请注意，如果需要测试 API 请求，请运行以下命令：

cd server
pnpm start

部署到 Vercel

部署 Next.js 应用最简单的方法是使用 Vercel 平台，这是 Next.js 的创建者提供的服务。

请查看我们的 Next.js 部署文档 了解更多详情。

改进点

尽管这个模板已经具备了基本的功能，但仍有一些可以改进的地方：

1. 增加测试覆盖：目前模板中缺少集成测试，可以 Cypress 等测试框架，确保代码的稳定性和可靠性。

2. 优化性能：减少打包体积，提高加载速度。

3. 完善文档：虽然模板已经提供了基本的使用说明，但可以进一步完善文档，增加更多使用示例和最佳实践。

4. 国际化支持：添加对多语言的支持，方便项目在不同地区的推广和使用。

5. 样式管理：引入更多现代化的样式解决方案，提升样式管理的灵活性和可维护性。

欢迎大家提出更多的改进建议。

结语

总的来说，这个 Next.js 企业项目模板是一个非常有价值的工具，特别适合初学者和企业开发者使用。它不仅提供了一个标准化的项目结构，还集成了多种现代化的开发工具和框架，确保项目的高效开发和维护。希望这个模板能帮助你更快地上手 Next.js 开发，并构建出高质量的企业应用。

毕竟，无论学习什么框架，最终都是要在实际项目中应用，为公司或个人带来利益。