t3 app router edge drizzle

T3 App Router (Rand)

Ein experimenteller Versuch, den fantastischen T3 -Stapel vollständig auf der Kantelaufzeit zu verwenden, mit dem Beta -App -Router von Next.js.

Dies soll ein Ort des Hackens und Lernens sein. Wir lernen immer noch, wie man Apps mit dem neuen App -Router von Next.js strukturiert, und Kommentare sind in Diskussionen willkommen.

Wenn Sie auf einen Fehler stoßen (Sie werden), erstellen Sie bitte ein Problem, damit wir Fehler beheben und gemeinsam lernen können.

Dies ist nicht für die Produktion gedacht. Verwenden Sie für eine produktionsbereitete Full-Stack-Anwendung die viel stabilere Erstellung von Create-T3-App.

Dieses Projekt ist nicht mit Create-T3-App verbunden.

Merkmale

Dieses Projekt repräsentiert die Kopienpastierung von Arbeit und Ideen von vielen wirklich klugen Leuten. Ich denke, es ist nützlich, sie alle zusammen in einem arbeitenden Prototyp zu sehen.

• Kantenlaufzeit für alle Seiten und Routen.
• Typ-Safe-SQL und Schema-Management mit Nieselregen.
  • Während Create-T3-App Prisma verwendet, kann Prisma nicht auf der Kantenlaufzeit laufen.
• Typ-Safe-API mit TRPC.
  • Die App -Router -Setup wird von hier aus kopiert.
  • Die installierte TRPC-Version ist derzeit an den experimentellen App-Router-TRPC-Client in ./src/trpc/@trpc gesperrt, der die React-Query-Abfrageschlüssel auf eine bestimmte Weise formatiert, die sich in späteren Versionen von TRPC änderte. Wenn Sie TRPC aktualisieren, wird die Flüssigkeitszufuhr nicht mehr funktionieren.
• Besitz der Authentifizierung mit auth.js.
  • Create-T3-App verwendet NextAuth, die die Edge-Laufzeit nicht unterstützt. Dieses Projekt verwendet den Nachfolger von NextAuth, Auth.js, was dies tut. Da Auth.js noch keine Unterstützung für Next.js aufgebaut hat, wird ihre SolidStart -Implementierung kopiert und leicht modifiziert.
• Styling mit Rückenwind.
  • Es ist nur CSS, also funktioniert es im App -Router gut.
• Reagieren Sie Komponenten und Layout von Shadcn/UI
  • Sie sind auch nur CSS und Radix, daher funktionieren sie im App -Router gut.

Daten abrufen

Es gibt einige Optionen, die uns Serverkomponenten + TRPC + React -Abfrage ergeben. Die Flexibilität dieser Tools ermöglicht es uns, verschiedene Strategien für verschiedene Fälle im selben Projekt zu verwenden.

1. Abrufen Sie Daten auf dem Server ab und rendern Sie sie auf dem Server oder geben Sie sie an Client -Komponenten weiter. Beispiel.
2. Abrufen Sie Daten auf dem Server ab und verwenden Sie sie, um den Cache von React-Query auf dem Client zu hydratieren. Beispiel: Daten auf dem Server abrufen und dehydrieren und dann zwischengespeicherte Daten vom Server auf dem Client verwenden.
3. Daten zum Client abrufen.
4. Feln Sie Daten den Server ab, blockieren jedoch nicht das erste Byte- und Stream -Serverkomponenten mithilfe einer Spannungsgrenze an den Client. TODO: Beispiel.

Erste Schritte

1. Führen Sie einige Befehle aus.

   pnpm i
   cp .env.example .env

2. Füllen .Env.

3. Schieben Sie Ihre Schema -Änderungen in eine neue Planetscale -Datenbank. Verwenden Sie diesen Befehl nicht in einer vorhandenen Datenbank, die Ihnen wichtig ist. Es ist destruktiv (und in Beta).

   pnpm db:push

4. Starten Sie den nächsten.js Dev Server.

   pnpm dev