组长:你熟悉过React,开发个Next项目模板吧,我:怎么扯上关系的?
组长:你熟悉过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 部署文档 了解更多详情。
改进点
尽管这个模板已经具备了基本的功能,但仍有一些可以改进的地方:
增加测试覆盖:目前模板中缺少集成测试,可以 Cypress 等测试框架,确保代码的稳定性和可靠性。 优化性能:减少打包体积,提高加载速度。 完善文档:虽然模板已经提供了基本的使用说明,但可以进一步完善文档,增加更多使用示例和最佳实践。 国际化支持:添加对多语言的支持,方便项目在不同地区的推广和使用。 样式管理:引入更多现代化的样式解决方案,提升样式管理的灵活性和可维护性。
欢迎大家提出更多的改进建议。
结语
总的来说,这个 Next.js 企业项目模板是一个非常有价值的工具,特别适合初学者和企业开发者使用。它不仅提供了一个标准化的项目结构,还集成了多种现代化的开发工具和框架,确保项目的高效开发和维护。希望这个模板能帮助你更快地上手 Next.js 开发,并构建出高质量的企业应用。
毕竟,无论学习什么框架,最终都是要在实际项目中应用,为公司或个人带来利益。
![](https://qncdn.mopic.mozigu.net/f/o0enm5lqh2rbsqbopel/126660174a84/Snipaste_2023-09-08_10-32-47.png)