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