next-enterprise

next-enterprise

Next.js企业级开发框架 集成优化实践

next-enterprise是一个功能丰富的Next.js企业级开发框架。它集成了TypeScript、Tailwind CSS、ESLint等主流技术,提供性能优化、代码质量、测试、部署等多方面的最佳实践。该框架还包含组件库、状态管理、环境变量处理等实用功能,可帮助开发者快速构建高质量的大型应用,提升开发效率。

Next.js企业级模板性能优化TypeScript测试Github开源项目
<img align="right" width="360px" height="410px" src="https://yellow-cdn.veclightyear.com/835a84d5/e5d786ea-d542-448c-adee-990073d85ae1.png">

Next.js 企业级样板 </br> GitHub Actions 工作流状态 GitHub 许可证 GitHub 贡献者 Discord Blazity

欢迎使用 Next.js 企业级样板,这是一个面向企业项目的开源模板!它包含了许多功能,可以帮助你构建高性能、易维护且令人愉悦的应用。我们已经为你完成了所有繁重的工作,所以请放松,准备好用你的出色应用征服世界吧!🌍

[!注意] Blazity 是一群 Next.js/Headless 专家。如果你想讨论你的项目或只是想和我们聊天,请通过 contact@blazity.com 联系我们

特性

使用这个模板,你将获得所有你需要的优秀功能:

目录

🎯 开始使用

要开始使用这个样板,请按照以下步骤操作:

  1. Fork 并克隆仓库:
## 别忘了先 ⭐ 点赞并 fork :) git clone https://github.com/<your_username)/next-enterprise.git
  1. 安装依赖:
yarn install --frozen-lockfile
  1. 运行开发服务器:
yarn dev
  1. 在浏览器中打开 http://localhost:3000 查看结果。

  2. 这个项目使用 git hook 来强制执行约定式提交。要安装 git hook,请在项目根目录运行以下命令:

brew install pre-commit pre-commit install -t commit-msg

🚀 部署

通过点击下面的按钮,轻松使用 Vercel 部署你的 Next.js 应用:

Vercel

📃 脚本概述

package.json 中提供了以下脚本:

  • dev: 启动开发服务器并输出彩色日志
  • build: 构建生产环境的应用
  • start: 启动生产服务器
  • lint: 使用ESLint进行代码检查
  • lint:fix: 自动修复代码检查错误
  • prettier: 检查代码格式是否规范
  • prettier:fix: 自动修复格式问题
  • analyze: 分析客户端、服务器和边缘环境的包大小
  • storybook: 启动Storybook服务器
  • build-storybook: 构建可部署的Storybook
  • test: 运行单元测试和集成测试
  • e2e:headless: 以无头模式运行端到端测试
  • e2e:ui: 以UI模式运行端到端测试
  • format: 使用Prettier格式化代码
  • postinstall: 应用补丁到外部依赖
  • preinstall: 确保项目使用Yarn安装
  • coupling-graph: 生成组件的耦合和内聚图

🔗 耦合图

coupling-graph脚本是一个有用的工具,可以帮助可视化项目内部模块之间的耦合和连接。它使用Madge库构建。要生成图表,只需运行以下命令:

yarn coupling-graph

这将创建一个graph.svg文件,其中包含组件之间连接的图形表示。您可以使用任何支持SVG的查看器打开该文件。

graph

🧪 测试

这个样板项目包含各种测试设置,以确保应用程序的可靠性和稳健性。

运行测试

  • 单元和集成测试:使用yarn test运行Jest测试
  • 端到端测试(无头模式):使用yarn e2e:headless以无头模式运行Playwright测试
  • 端到端测试(UI模式):使用yarn e2e:ui以UI模式运行Playwright测试
<img width="1392" alt="image" src="https://yellow-cdn.veclightyear.com/835a84d5/6f9fefaa-5dda-4a46-b0af-550b5e3840bd.png">

验收测试

为了编写验收测试,我们利用Storybook的play函数。这允许您与组件交互并在Storybook中测试各种用户流程。

/* * 查看 https://storybook.js.org/docs/react/writing-stories/play-function#working-with-the-canvas * 了解更多关于使用canvasElement查询DOM的信息 */ export const FilledForm: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement) const emailInput = canvas.getByLabelText("email", { selector: "input", }) await userEvent.type(emailInput, "example-email@email.com", { delay: 100, }) const passwordInput = canvas.getByLabelText("password", { selector: "input", }) await userEvent.type(passwordInput, "ExamplePassword", { delay: 100, }) // 查看 https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args 了解如何在Actions面板中设置日志记录 const submitButton = canvas.getByRole("button") await userEvent.click(submitButton) }, }

冒烟测试

在这个样板项目中,我们使用Storybook内置的冒烟测试支持,以验证组件能否正确渲染且没有错误。只需运行yarn test-storybook即可执行冒烟测试。请记住只用JSX或TSX格式编写stories。冒烟测试和许多其他功能对MDX格式的stories支持不佳。

🎨 样式和设计系统

这个样板项目使用Tailwind CSS进行样式设计,并使用CVA创建强大且易用的设计系统。如果您想了解更多关于此设置的信息,请查看Vercel的这个精彩视频:

Styling and Design System

CVA - 变体的新方法

虽然像StitchesVanilla Extract这样的CSS-in-TS库非常适合构建类型安全的UI组件,但它们可能并不适合所有人。您可能更喜欢对样式表有更多控制权,需要使用Tailwind CSS等框架,或者simply喜欢编写自己的CSS。

使用传统CSS创建变体可能是一项繁琐的任务,需要手动将类与属性匹配并添加类型。CVA就是为了解决这个问题而生的,让您可以专注于UI开发中令人愉快的方面。通过提供一种简单且类型安全的方式来创建变体,CVA简化了这个过程,并帮助您创建强大的设计系统,而不会牺牲CSS的灵活性和控制力。

💾 状态管理

虽然这个样板项目没有包含特定的状态管理库,但我们认为选择最适合您项目需求的库至关重要。以下是我们推荐的一些状态管理库:

Zustand

Zustand是一个小巧、快速且可扩展的状态管理库。它设计简单直观,非常适合中小型项目。它还针对包大小进行了优化,确保对应用程序性能的影响最小。

Jotai

Jotai是一个基于原子的React状态管理库,专注于提供最小化和直观的API。其基于原子的方法允许您以细粒度的方式管理状态,同时仍然高度优化包大小。

Recoil

Recoil是Facebook专为React应用程序开发的状态管理库。通过利用原子和选择器,Recoil允许您高效地管理状态和派生状态。其主要优势是能够只在订阅的状态发生变化时更新组件,减少不必要的重新渲染,保持应用程序的快速和高效。Recoil还提供了内置的调试工具,为开发者提供了良好的开发体验。

选择最适合您的需求和项目结构的库,以确保为您的应用程序提供高效的状态管理解决方案。

🤖 ChatGPT代码审查

我们集成了创新的ChatGPT代码审查,用于AI驱动的自动代码审查。这个功能提供实时的代码反馈,帮助提高代码质量并捕捉潜在问题。

要使用ChatGPT代码审查,请添加一个OPENAI_API_KEY环境变量,其中包含来自OpenAI平台的适当密钥。有关设置详情,请参阅文档中的使用GitHub Actions部分。

image

💻 环境变量处理

T3 Env是一个库,提供构建时的环境变量检查、类型验证和转换功能。它确保您的应用程序使用正确的环境变量,并且它们的值符合预期类型。您再也不会因为不正确的环境变量使用而遇到运行时错误。

配置文件位于env.mjs。只需设置您的客户端和服务器变量,然后从项目中的任何文件导入env即可。

export const env = createEnv({ server: { // 服务器变量 SECRET_KEY: z.string(), }, client: { // 客户端变量 API_URL: z.string().url(), }, runtimeEnv: { // 分配运行时变量 SECRET_KEY: process.env.SECRET_KEY, API_URL: process.env.NEXT_PUBLIC_API_URL, }, })

如果未设置所需的环境变量,您将收到错误消息:

❌ 无效的环境变量:{ SECRET_KEY: [ 'Required' ] }

🤝 贡献

我们随时欢迎贡献!要参与贡献,请遵循以下步骤:

  1. Fork 仓库。
  2. 创建一个具有描述性名称的新分支。
  3. 进行更改,并使用约定式提交格式提交它们。
  4. 将更改推送到 fork 的仓库。
  5. 创建一个拉取请求,我们将审查您的更改。

支持

如果您需要帮助或只是想分享您对项目的想法,我们鼓励您加入我们的 Discord 社区。这是链接:https://blazity.com/discord。这是一个交流想法和互相帮助的空间。我们感谢每个人的贡献,期待欢迎您的加入。

<br /> <a href="https://discord.gg/fyWtyNKmfX" style="width: 100%; display: flex; justify-content: center;"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/2be5b301-488e-4c68-a782-86390534ca7c.png?style=banner2" alt="Blazity Discord Banner"/> </a> <br />

📜 许可证

本项目采用 MIT 许可证。有关更多信息,请参阅LICENSE文件。

贡献者

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center" valign="top" width="14.28%"><a href="https://bstefanski.com/"><img src="https://avatars.githubusercontent.com/u/28964599?v=4?s=100" width="100px;" alt="Bart Stefanski"/><br /><sub><b>Bart Stefanski</b></sub></a><br /><a href="https://github.com/Blazity/next-enterprise/commits?author=bmstefanski" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/jjablonski-it"><img src="https://avatars.githubusercontent.com/u/51968772?v=4?s=100" width="100px;" alt="Jakub Jabłoński"/><br /><sub><b>Jakub Jabłoński</b></sub></a><br /><a href="#infra-jjablonski-it" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td> <td align="center" valign="top" width="14.28%"><a href="https://neg4n.dev/"><img src="https://avatars.githubusercontent.com/u/57688858?v=4?s=100" width="100px;" alt="Igor Klepacki"/><br /><sub><b>Igor Klepacki</b></sub></a><br /><a href="https://github.com/Blazity/next-enterprise/commits?author=neg4n" title="Documentation">📖</a></td> </tr> </tbody> <tfoot> <tr> <td align="center" size="13px" colspan="7"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/f21fe0b6-59ec-4d08-9866-070c84b8e3e7.svg"> <a href="https://all-contributors.js.org/docs/en/bot/usage">添加您的贡献</a> </img> </td> </tr> </tfoot> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END --> <!-- Badges and links -->

编辑推荐精选

蛙蛙写作

蛙蛙写作

AI小说写作助手,一站式润色、改写、扩写

蛙蛙写作—国内先进的AI写作平台,涵盖小说、学术、社交媒体等多场景。提供续写、改写、润色等功能,助力创作者高效优化写作流程。界面简洁,功能全面,适合各类写作者提升内容品质和工作效率。

AI助手AI工具AI写作工具AI辅助写作蛙蛙写作学术助手办公助手营销助手
Trae

Trae

字节跳动发布的AI编程神器IDE

Trae是一种自适应的集成开发环境(IDE),通过自动化和多元协作改变开发流程。利用Trae,团队能够更快速、精确地编写和部署代码,从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能,是提升开发效率的理想工具。

热门AI工具生产力协作转型TraeAI IDE
问小白

问小白

全能AI智能助手,随时解答生活与工作的多样问题

问小白,由元石科技研发的AI智能助手,快速准确地解答各种生活和工作问题,包括但不限于搜索、规划和社交互动,帮助用户在日常生活中提高效率,轻松管理个人事务。

聊天机器人AI助手热门AI工具AI对话
Transly

Transly

实时语音翻译/同声传译工具

Transly是一个多场景的AI大语言模型驱动的同声传译、专业翻译助手,它拥有超精准的音频识别翻译能力,几乎零延迟的使用体验和支持多国语言可以让你带它走遍全球,无论你是留学生、商务人士、韩剧美剧爱好者,还是出国游玩、多国会议、跨国追星等等,都可以满足你所有需要同传的场景需求,线上线下通用,扫除语言障碍,让全世界的语言交流不再有国界。

讯飞智文

讯飞智文

一键生成PPT和Word,让学习生活更轻松

讯飞智文是一个利用 AI 技术的项目,能够帮助用户生成 PPT 以及各类文档。无论是商业领域的市场分析报告、年度目标制定,还是学生群体的职业生涯规划、实习避坑指南,亦或是活动策划、旅游攻略等内容,它都能提供支持,帮助用户精准表达,轻松呈现各种信息。

热门AI工具AI办公办公工具讯飞智文AI在线生成PPTAI撰写助手多语种文档生成AI自动配图
讯飞星火

讯飞星火

深度推理能力全新升级,全面对标OpenAI o1

科大讯飞的星火大模型,支持语言理解、知识问答和文本创作等多功能,适用于多种文件和业务场景,提升办公和日常生活的效率。讯飞星火是一个提供丰富智能服务的平台,涵盖科技资讯、图像创作、写作辅助、编程解答、科研文献解读等功能,能为不同需求的用户提供便捷高效的帮助,助力用户轻松获取信息、解决问题,满足多样化使用场景。

模型训练热门AI工具内容创作智能问答AI开发讯飞星火大模型多语种支持智慧生活
Spark-TTS

Spark-TTS

一种基于大语言模型的高效单流解耦语音令牌文本到语音合成模型

Spark-TTS 是一个基于 PyTorch 的开源文本到语音合成项目,由多个知名机构联合参与。该项目提供了高效的 LLM(大语言模型)驱动的语音合成方案,支持语音克隆和语音创建功能,可通过命令行界面(CLI)和 Web UI 两种方式使用。用户可以根据需求调整语音的性别、音高、速度等参数,生成高质量的语音。该项目适用于多种场景,如有声读物制作、智能语音助手开发等。

咔片PPT

咔片PPT

AI助力,做PPT更简单!

咔片是一款轻量化在线演示设计工具,借助 AI 技术,实现从内容生成到智能设计的一站式 PPT 制作服务。支持多种文档格式导入生成 PPT,提供海量模板、智能美化、素材替换等功能,适用于销售、教师、学生等各类人群,能高效制作出高品质 PPT,满足不同场景演示需求。

讯飞绘文

讯飞绘文

选题、配图、成文,一站式创作,让内容运营更高效

讯飞绘文,一个AI集成平台,支持写作、选题、配图、排版和发布。高效生成适用于各类媒体的定制内容,加速品牌传播,提升内容营销效果。

AI助手热门AI工具AI创作AI辅助写作讯飞绘文内容运营个性化文章多平台分发
材料星

材料星

专业的AI公文写作平台,公文写作神器

AI 材料星,专业的 AI 公文写作辅助平台,为体制内工作人员提供高效的公文写作解决方案。拥有海量公文文库、9 大核心 AI 功能,支持 30 + 文稿类型生成,助力快速完成领导讲话、工作总结、述职报告等材料,提升办公效率,是体制打工人的得力写作神器。

下拉加载更多