欢迎使用 Next.js 企业级样板,这是一个面向企业项目的开源模板!它包含了许多功能,可以帮助你构建高性能、易维护且令人愉悦的应用。我们已经为你完成了所有繁重的工作,所以请放松,准备好用你的出色应用征服世界吧!🌍
[!注意] Blazity 是一群 Next.js/Headless 专家。如果你想讨论你的项目或只是想和我们聊天,请通过 contact@blazity.com 联系我们
使用这个模板,你将获得所有你需要的优秀功能:
ts-reset
库实现最终的类型安全要开始使用这个样板,请按照以下步骤操作:
## 别忘了先 ⭐ 点赞并 fork :) git clone https://github.com/<your_username)/next-enterprise.git
yarn install --frozen-lockfile
yarn dev
在浏览器中打开 http://localhost:3000 查看结果。
这个项目使用 git hook 来强制执行约定式提交。要安装 git hook,请在项目根目录运行以下命令:
brew install pre-commit pre-commit install -t commit-msg
通过点击下面的按钮,轻松使用 Vercel 部署你的 Next.js 应用:
package.json
中提供了以下脚本:
dev
: 启动开发服务器并输出彩色日志build
: 构建生产环境的应用start
: 启动生产服务器lint
: 使用ESLint进行代码检查lint:fix
: 自动修复代码检查错误prettier
: 检查代码格式是否规范prettier:fix
: 自动修复格式问题analyze
: 分析客户端、服务器和边缘环境的包大小storybook
: 启动Storybook服务器build-storybook
: 构建可部署的Storybooktest
: 运行单元测试和集成测试e2e:headless
: 以无头模式运行端到端测试e2e:ui
: 以UI模式运行端到端测试format
: 使用Prettier格式化代码postinstall
: 应用补丁到外部依赖preinstall
: 确保项目使用Yarn安装coupling-graph
: 生成组件的耦合和内聚图coupling-graph
脚本是一个有用的工具,可以帮助可视化项目内部模块之间的耦合和连接。它使用Madge库构建。要生成图表,只需运行以下命令:
yarn coupling-graph
这将创建一个graph.svg
文件,其中包含组件之间连接的图形表示。您可以使用任何支持SVG的查看器打开该文件。
这个样板项目包含各种测试设置,以确保应用程序的可靠性和稳健性。
yarn test
运行Jest测试yarn e2e:headless
以无头模式运行Playwright测试yarn e2e:ui
以UI模式运行Playwright测试为了编写验收测试,我们利用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的这个精彩视频:
虽然像Stitches和Vanilla Extract这样的CSS-in-TS库非常适合构建类型安全的UI组件,但它们可能并不适合所有人。您可能更喜欢对样式表有更多控制权,需要使用Tailwind CSS等框架,或者simply喜欢编写自己的CSS。
使用传统CSS创建变体可能是一项繁琐的任务,需要手动将类与属性匹配并添加类型。CVA就是为了解决这个问题而生的,让您可以专注于UI开发中令人愉快的方面。通过提供一种简单且类型安全的方式来创建变体,CVA简化了这个过程,并帮助您创建强大的设计系统,而不会牺牲CSS的灵活性和控制力。
虽然这个样板项目没有包含特定的状态管理库,但我们认为选择最适合您项目需求的库至关重要。以下是我们推荐的一些状态管理库:
Zustand是一个小巧、快速且可扩展的状态管理库。它设计简单直观,非常适合中小型项目。它还针对包大小进行了优化,确保对应用程序性能的影响最小。
Jotai是一个基于原子的React状态管理库,专注于提供最小化和直观的API。其基于原子的方法允许您以细粒度的方式管理状态,同时仍然高度优化包大小。
Recoil是Facebook专为React应用程序开发的状态管理库。通过利用原子和选择器,Recoil允许您高效地管理状态和派生状态。其主要优势是能够只在订阅的状态发生变化时更新组件,减少不必要的重新渲染,保持应用程序的快速和高效。Recoil还提供了内置的调试工具,为开发者提供了良好的开发体验。
选择最适合您的需求和项目结构的库,以确保为您的应用程序提供高效的状态管理解决方案。
我们集成了创新的ChatGPT代码审查,用于AI驱动的自动代码审查。这个功能提供实时的代码反馈,帮助提高代码质量并捕捉潜在问题。
要使用ChatGPT代码审查,请添加一个OPENAI_API_KEY
环境变量,其中包含来自OpenAI平台的适当密钥。有关设置详情,请参阅文档中的使用GitHub Actions部分。
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' ] }
我们随时欢迎贡献!要参与贡献,请遵循以下步骤:
如果您需要帮助或只是想分享您对项目的想法,我们鼓励您加入我们的 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文件。
AI小说写作助手,一站式润色、改写、扩写
蛙蛙写作—国内先进的AI写作平台,涵盖小说、学术、社交媒体等多场景。提供续写、改写、润色等功能,助力创作者高效优化写作流程。界面简洁,功能全面,适合各类写作者提升内容品质和工作效率。
字节跳动发布的AI编程神器IDE
Trae是一种自适应的集成开发环境(IDE),通过自动化和多元协作改变开发流程。利用Trae,团队能够更快速、精确地编写和部署代码,从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能,是提升开发效率的理想工具。
全能AI智能助手,随时解答生活与工作的多样问题
问小白,由元石科技研发的AI智能助手,快速准确地解答各种生活和工作问题,包括但不限于搜索、规划和社交互动,帮助用户在日常生活中提高效率,轻松管理个人事务。
实时语音翻译/同声传译工具
Transly是一个多场景的AI大语言模型驱动 的同声传译、专业翻译助手,它拥有超精准的音频识别翻译能力,几乎零延迟的使用体验和支持多国语言可以让你带它走遍全球,无论你是留学生、商务人士、韩剧美剧爱好者,还是出国游玩、多国会议、跨国追星等等,都可以满足你所有需要同传的场景需求,线上线下通用,扫除语言障碍,让全世界的语言交流不再有国界。
一键生成PPT和Word,让学习生活更轻松
讯飞智文是一个利用 AI 技术的项目,能够帮助用户生成 PPT 以及各类文档。无论是商业领域的市场分析报告、年度目标制定,还是学生群体的职业生涯规划、实习避坑指南,亦或是活动策划、旅游攻略等内容,它都能提供支持,帮助用户精准表达,轻松呈现各种信息。
深度推理能力全新升级,全面对标OpenAI o1
科大讯飞的星火大模型,支持语言理解、知识问答和文本创作等多功能,适用于多种文件和业务场景,提升办公和日常生活的效率。讯飞星火是一个提供丰富智能服务的平台,涵盖科技资讯、图像创作、写作辅助、编程解答、科研文献解读等功能,能为不同需求的用户提供便捷高效的帮助,助力用户轻松获取信息、解决问题,满足多样化使用场景。
一种基于大语言模型的高效单流解耦语音令牌文本到语音合成模型
Spark-TTS 是一个基于 PyTorch 的开源文本到语音合成项目,由多个知名机构联合参与。该项目提供了高效的 LLM(大语言模型)驱动的语音合成方案,支持语音克隆和语音创建功能,可通过命令行界面(CLI)和 Web UI 两种方式使用。用户可以根据需求调整语音的性别、音高、速度等参数,生成高质量的语音。该项目适用于多种场景,如有声读物制作、智能语音助手开发等。
AI助力,做PPT更简单!
咔片是一款轻量化在线演示设计工具,借助 AI 技术,实现从内容生成到智能设计的一站式 PPT 制作服务。支持多种文档格式导入生成 PPT,提供海量模板、智能美化、素材替换等功能,适用于销售、教师、学生等各类人群,能高效制作出高品质 PPT,满足不同场景演示需求。
选题、配图、成文,一站式创作,让内容运营更高效
讯飞绘文,一个AI集成平台,支持写作、选题、配图、排版和发布。高效生成适用于各类媒体的定制内容,加速品牌传播,提升内容营销效果。
专业的AI公文写作平台,公文写作神器
AI 材料星,专业的 AI 公文写作辅助平台,为体制内工作人员提供高效的公文写作解决方案。拥有海量公文文库、9 大核心 AI 功能,支持 30 + 文稿类型生成,助力快速完成领导讲话、工作总结、述职报告等材料,提升办公效率,是体制打工人的得力写作神器。
最新AI工具、AI资讯
独家AI资源、AI项目落地
微信扫一扫关注公众号