大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

什么是 create-t3-app

T3 Stack 是 Theo 开发的 Web 开发堆栈，专注于简单性、模块化和全堆栈类型安全。核心部分是 Next.js 和 TypeScript、Tailwind CSS。 如果正在做类似后端的事情，tRPC、Prisma 和 NextAuth.js 也是开箱即用的。

create-t3-app 则是由经验丰富的 T3 Stack 开发人员构建的 CLI，用于简化模块化 T3 Stack 应用程序设置。 这意味着应用每个部分都是可选，并且“模板”是根据特定需求生成的。

但是，create-t3-app 不仅仅是一个模板。 开发者可以自由选择自己的库来满足应用程序的需求。 虽然 create-t3-app 不想为状态管理和部署等更具体的问题提供解决方案，但确实也提供了一系列建议。比如：

• 按需选择：开发者很容易陷入“添加所有内容”的陷阱 ， create-t3-app 明确不想这样做，添加到 create-t3-app 的所有内容都应该解决所包含的核心技术中存在的特定问题。 这意味着 create-t3-app 不会添加状态库（zustand、redux）等内容，但确实会添加 NextAuth.js 等内容并为开发者集成 Prisma 和 tRPC。
• 安全负责任：create-t3-app 不会押注于有风险的新数据库技术（SQL 很棒！），除了 tRPC，因为 tRP 本质上就是一些很容易移除的函数。
• 类型安全不是可选的：create-t3-app 的既定目标是提供启动新的全栈、类型安全 Web 应用程序的最快方法。 类型安全确实很重要，因为它提高了生产力并帮助减少错误。 任何损害 create-t3-app 类型安全性质的决定都应该在不同的项目中做出。

目前 create-t3-app 在 Github 上通过 MIT 协议开源，有超过 22k 的 star、1k 的 fork、代码贡献者 300+、妥妥的前端优质开源项目。

如何使用 create-t3-app

要使用 create-t3-app 搭建应用程序，只需要运行以下三个命令中的任意一个并回答命令提示符相关问题：

npm create t3-app@latest// yarnyarn create t3-app// yarnpnpm create t3-app@latest// pnpmbun create t3-app@latest// bun

下面将使用 tRPC 和 Tailwind CSS 搭建一个 T3 应用程序:

pnpm dlx create-t3-app@latest --CI --trpc --tailwind

create-t3-app 的 CLI 还支持很多高级用法，比如：

• [dir]： 包含带有项目名称的目录参数
• --noGit： 显式告诉 CLI 不要在项目中初始化新的 git 存储库
• -y --default： 绕过 CLI 并引导一个新的 t3 应用程序并选择所有选项
• --noInstall ：生成项目而不安装依赖项

值得一提的是，create-t3-app 还包括很多实验特性，允许开发者在没有任何提示的情况下构建任何应用程序，开发者可以自行选择是否启用。 请注意，这些标志是实验性的，将来可能会发生变化，而无需遵循 semver 版本控制。

• --CI： 让 CLI 知道当前处于 CI 模式
• --trpc： 在项目中包含 tRPC
• --prisma： 将 Prisma 包含在项目中
• --nextAuth ：在项目中包含 NextAuth.js
• --tailwind ：在项目中包含 Tailwind CSS

值得一提的是，如果开发者不提供 CI 标志，则以上标志全部无效。开发者不需要明确选择取消不想要的软件包。但是，如果希望明确，则可以传递 false，例如--nextAuth false。

参考资料

https://create.t3.gg/en/introduction

https://github.com/t3-oss/create-t3-app?tab=readme-ov-file

https://codingwithmanny.medium.com/combine-sign-in-with-ethereum-with-create-t3-app-8f54604caeeb

https://www.youtube.com/watch?v=JanC-MSnpeY