t3 app router edge drizzle

T3应用程序路由器（边缘）

通过Next.js的Beta应用程序路由器，将完全在Edge运行时使用出色的T3堆栈的实验尝试。

这是一个黑客学习的地方。我们仍在学习如何使用Next.js的新应用程序路由器来构建应用程序，并在讨论中欢迎评论。

如果您遇到错误（您将），请创建一个问题，以便我们可以修复错误并一起学习。

这不是用于生产的。对于准备生产的全栈应用程序，请使用更稳定的Create-T3-App。

该项目与Create-T3-App没有关联。

特征

该项目代表了许多真正聪明的人的工作和想法的复制。我认为在有效的原型中一起看到它们很有用。

• 所有页面和路线的边缘运行时。
• 带有毛毛雨的类型安全SQL和模式管理。
  • 虽然Create-T3-App使用Prisma，但Prisma无法在边缘运行时运行。
• 带有TRPC的类型安全API。
  • 从此处复制应用程序路由器设置。
  • 当前，已安装的TRPC版本已锁定到./src/trpc/@trpc中的实验应用Router TRPC客户端，该端机以特定方式在TRPC的以后版本中更改了React-Query查询键。如果升级TRPC，水合将停止工作。
• 拥有auth.js的拥有身份验证
  • Create-T3-App使用NextAuth，不支持边缘运行时。该项目使用NextAuth的后继auth.js，它确实如此。由于Auth.js尚未为Next.js构建支持，因此它们的固体实现被复制并稍作修改。
• 造型与尾风。
  • 它只是CSS，因此在应用程序路由器中工作正常。
• shadcn/ui的反应组件和布局
  • 它们也只是CSS和RADIX，因此在应用程序路由器中工作正常。

数据获取

服务器组件 + TRPC + React Query Prove我们有一些选项。这些工具的灵活性使我们可以在同一项目的不同情况下使用不同的策略。

1. 在服务器上获取数据并在服务器上渲染或将其传递给客户端组件。例子。
2. 在服务器上获取数据，并使用它来补充客户端的React-Query的缓存。示例：在服务器上获取和脱水数据，然后在客户端上使用服务器的缓存数据。
3. 在客户端获取数据。
4. 获取服务器的数据，但不要使用悬疑边界将第一个字节和流服务器组件阻止到客户端。托多：示例。

入门

1. 运行一些命令。

   pnpm i
   cp .env.example .env

2. 填写.env。

3. 将模式更改为新的行星数据库。不要在您关心的现有数据库上使用此命令。这是破坏性的（在beta中）。

   pnpm db:push

4. 启动下一个。JS开发服务器。

   pnpm dev