t3 app router edge drizzle

Routeur de l'application T3 (bord)

Une tentative expérimentale d'utiliser la fantastique pile T3 entièrement sur le runtime Edge, avec le routeur de l'application bêta de Next.js.

C'est censé être un lieu de piratage et d'apprentissage. Nous apprenons toujours à structurer les applications en utilisant le nouveau routeur d'applications de Next.js, et les commentaires sont les bienvenus dans les discussions.

Si vous rencontrez une erreur (vous le ferez), veuillez créer un problème afin que nous puissions corriger les bogues et apprendre ensemble.

Ceci n'est pas destiné à la production. Pour une application complète prête pour la production, utilisez la création-T3 Create-T3 beaucoup plus stable.

Ce projet n'est pas affilié à Create-T3-App.

Caractéristiques

Ce projet représente la copie du travail et des idées de beaucoup de gens vraiment intelligents. Je pense qu'il est utile de les voir tous ensemble dans un prototype de travail.

• Edge Runtime pour toutes les pages et itinéraires.
• Gestion de SQL et de schéma de type sécurisé avec une forme de bruine.
  • Alors que Create-T3-App utilise PRISMA, Prisma ne peut pas fonctionner sur Edge Runtime.
• API de type type avec TRPC.
  • La configuration du routeur de l'application est copiée d'ici.
  • La version TRPC installée est actuellement verrouillée sur le client TRPC du routeur de l'application expérimental dans ./src/trpc/@trpc , qui formate les clés de requête React-Query d'une manière spécifique qui a changé dans les versions ultérieures de TRPC. Si vous améliorez TRPC, l'hydratation cessera de fonctionner.
• Authentification possédée avec auth.js.
  • Create-T3-App utilise NextAuth, qui ne prend pas en charge l'exécution Edge. Ce projet utilise le successeur de NextAuth, Auth.js, qui le fait. Étant donné que Auth.js n'a pas encore construit le support pour next.js, leur implémentation solide est copiée et légèrement modifiée.
• Style avec le vent arrière.
  • C'est juste CSS, donc ça marche très bien dans le routeur de l'application.
• React Composants et disposition de Shadcn / UI
  • Ils ne sont aussi que CSS et Radix, donc ils fonctionnent très bien dans le routeur de l'application.

Données récupérant

Il existe quelques options que les composants du serveur + TRPC + React Query nous permettent. La flexibilité de ces outils nous permet d'utiliser différentes stratégies pour différents cas sur le même projet.

1. Remplissez des données sur le serveur et rendez sur le serveur ou transmettez-les aux composants du client. Exemple.
2. Remplissez les données sur le serveur et utilisez-les pour hydrater le cache de React-Query sur le client. Exemple: récupérez et déshydrater les données sur le serveur, puis utilisez des données mises en cache à partir du serveur sur le client.
3. Retrouvez des données sur le client.
4. Remplissez les données du serveur, mais ne bloquez pas les composants du premier octet et du serveur de flux au client à l'aide d'une limite de suspense. TODO: exemple.

Commencer

1. Exécutez certaines commandes.

   pnpm i
   cp .env.example .env

2. Remplissez .env.

3. Poussez vos modifications de schéma dans une nouvelle base de données PlanetScale. N'utilisez pas cette commande sur une base de données existante qui vous tient à cœur. C'est destructeur (et en version bêta).

   pnpm db:push

4. Démarrez le serveur Dev Next.js.

   pnpm dev