开源项目学习之 Next.js 企业级启动模版 - 编程导航 | 一线开发者编程经验和技术实战分享

大家好，我是一百个Chocolate。

本期和各位一起学习一下开源项目，今天主题是 next-enterprise，名字还是挺吸引人的，企业级别的启动模版，来看看会有哪些配置。

该项目的描述是企业级 Next.js 样板，用于高性能、可维护的应用程序。包含 Tailwind CSS、TypeScript、ESLint、Prettier、测试工具等功能，可加速您的开发。

https://github.com/Blazity/next-enterprise

如果项目部署在 GitHub 的话可以说是开箱即用了，不过这里面有部分配置看个人喜好，我们也是秉持学习的态度，如果你在看的过程中发现有些配置挺有意思的或很有用，那么就可以参考这个仓库集成到个人项目中，不一定要完完全全使用这个模版，按需配置就好。

启动项目

这里有个注意点，该项目默认会让你使用 yarn 安装，而不是 npm 或者 pnpm，所以看大家个人喜好。

当我们 clone 项目下来的时候，尽量要使用最新的 node 版本，我之前用 v18.6.0 还安装不了依赖，该项目进行了一定限制，如下图所示（package.json 文件）：

因此，对于前端来说的话 nvm 是必须了，可以让我们随时切换 node 版本：

那么我们就采用最新的就好了。

执行 yarn dev 我们先看看项目跑起来长什么样子：

页面还是比较简洁的，主要是关于仓库的一些介绍，以及下方功能点的展示。

scripts

除了页面，我们重点看看 package.json 里面的 scripts 字段，看看作者提供了那些可执行的命令。

一些比较常见的就不一一来看了，比如 dev build start lint prettier

在上述功能点里面有提到一个 Bundle analyzer plugin - Keep an eye on your bundle size，他帮我们写在了 analyze 指令里面，我们执行 yarn analyze 看看：

我第一次看的时候还是蛮震撼的，不过想了想貌似对我来说帮助好像不大，作为一个螺丝钉的我基本上不会关注这个，但对于开源项目的话还是需要看一下 bundle size，做好相关的优化。

storybook

接着，我们看下一个命令，关于 storybook。如果你有用过 react-use，那么你应该多多少少知道 storybook 这玩意，或者你是用过 antd 之类的 ui 库，storybook 可以和你的组件进行同步，打造一个组件库之类的。

类似的也还有 dumi 这样的开源框架，你写的组件源码和展示是保持一致的。我们通过 yarn storybook 执行一下看看长啥样吧：

可以看到左侧就是我们的组件列表，右上方是预览效果，右下方就可以直接对组件进行属性的更改。

具体代码是这样的：

Button 组件

那么，既然提到了 Button，我们就来看看 Button.tsx 里面是啥内容吧。

这里有用到两个东西，cva 以及 tailwind-merge。

import { cva, type VariantProps } from "class-variance-authority"

import { twMerge } from "tailwind-merge"

参考上述 Button 组件的代码，应该也能猜到 cva 做了什么事情，比如我们使用 tailwindcss 对吧，其实也是一种 css in ts 的形式，虽然写起来真的很便捷，但有一个用户痛点是代码太长了，给大家举个例子，如下图所示：

这是我一个博客项目写的代码，这只是一个简单的 Button 组件，在 2k 显示器上看不会觉得有啥，但是真正放在 vscode 里面看的时候还是会觉得很长。

那么 cva 就觉得 css in ts 也许不适合所有人，我应该去做好解耦，那么再看一遍代码逻辑：

这样其实就做到了 ui 和逻辑的分离，如果有那种专门做定制化的前端的话，或许就能单独去做这件事情，另外一个前端就写好组件引用一下就好了。

而对于 tailwind-merge 这个包的话还是挺重要的，能够让我们合并样式，比如有些样式是需要变量来控制的，基本上使用 tailwindcss 必装的一个包了。

测试相关

个人觉得还是开源项目用的比较多，问了许多前端伙伴基本上很少自己去写测试相关的东西，如果都是前端来做了，那工作量太大了。

这块我暂时不会研究很多，对于 react 来说的话，可以关注一下 playwright 以及 Jest，当然还有 Vitest。

因此这里就简单略过了，感兴趣的可以多往这块了解了解。

组件耦合和内聚图 - 管理组件关系的工具

这里还有一个有意思的，可以直接看到组件关系，项目已经帮我们生成了一份 svg 图，如下所示：

注：这里我装了一个 vscode svg preview 插件，还是挺有帮助的，可以工具内查看。

T3 Env

这个算是 t3 stack 的某一个部分，在过去我们使用 .env 文件，如果我们弄错了相关配置，代码跑起来的时候就会有报错，尤其是当我们正准备 deploy 阶段的时候，发现一堆红色的提示。

那么 T3 Env 就做了这件事情，能够保证你的环境变量是类型安全的，我们来看看具体的代码：

比较关键的是 zod 这个库的支持，在使用 prisma 这样的框架的时候也是配合 zod 使用。

Zod 是一个 TypeScript 优先的模式声明和验证库。

个人觉得挺好用的，T3 Env 还是值得集成一下的。

ts-reset

最后我们来看看 ts-reset 做了什么事情， GitHub 地址：https://github.com/total-typescript/ts-reset

介绍是：TypeScript 的内置类型并不完美。 ts-reset 让它们变得更好。

在没有 ts-reset 前呢，会有以下几点问题：

json (在 fetch 中) 和 JSON.parse 都返回 any
.filter(Boolean) 不会像你期望的那样
array.includes 经常中断只读数组

那么使用了 ts-reset 之后，会是：

👍 .json (在 fetch 中) 和 JSON.parse 都返回 unknown
✅ .filter(Boolean)完全符合您的预期
🥹 array.includes 已扩展，更加符合人体工程学
…

下面是例子：

// Import in a single file, then across your whole project...

import "@total-typescript/ts-reset";

// .filter just got smarter!

const filteredArray = [1, 2, undefined].filter(Boolean); // number[]

// Get rid of the any's in JSON.parse and fetch

const result = JSON.parse("{}"); // unknown

fetch("/")

.then((res) => res.json())

.then((json) => {

console.log(json); // unknown

});

集成的话也比较简单，如下步骤：

Get Started

Install: npm i -D @total-typescript/ts-reset
Create a reset.d.ts file in your project with these contents:

// Do not add any other lines of code to this file!

import "@total-typescript/ts-reset";

如果你想要使用具体的某个类型，可以来到仓库看看，选择性集成即可。对于我们当前这个 Next.js 项目模版来说，它是全集成的，如下图所示：

那么大概介绍就到此结束啦，文章介绍了大概 80% 内容，用心的我还录制了相关介绍视频，目前已经发布在 b 站了，如下：

https://www.bilibili.com/video/BV1TX4y1v7J4/

文字稿是单独写的，并非视频原稿哈。而视频的话会更细致一点，会对部分内容做一定补充，比如作者用了 Radix UI，我补充了一下 shadcn/ui。我不会去随便发短视频，长视频是我的频道主流，这个就看大家个人喜好了，文字稿也许了解的会更快一点。

以上就是全部内容了，非常感谢你能阅读到此，咱们下期再见。

学如逆水行舟，不进则退。