t3 app router edge drizzle

Enrutador de aplicaciones T3 (borde)

Un intento experimental de usar la fantástica pila T3 completamente en el tiempo de ejecución de Edge, con el enrutador de aplicaciones beta de Next.js.

Esto está destinado a ser un lugar de piratería y aprendizaje. Todavía estamos aprendiendo cómo estructurar aplicaciones usando el nuevo enrutador de aplicaciones de Next.js, y los comentarios son bienvenidos en las discusiones.

Si encuentra un error (lo hará), cree un problema para que podamos solucionar errores y aprender juntos.

Esto no está destinado a la producción. Para una aplicación completa lista para la producción, use la APP create-T3 mucho más estable.

Este proyecto no está afiliado a Create-T3-APP.

Características

Este proyecto representa la copia del trabajo y las ideas de muchas personas realmente inteligentes. Creo que es útil verlos todos juntos en un prototipo de trabajo.

• Tiempo de ejecución para todas las páginas y rutas.
• Gestión de SQL y esquema seguros con llovizz-erm.
  • Mientras que CREATE-T3-APP usa Prisma, Prisma no puede funcionar en el tiempo de ejecución de Edge.
• API de tipo seguro con TRPC.
  • La configuración del enrutador de aplicaciones se copia desde aquí.
  • La versión TRPC instalada está actualmente bloqueada en el cliente TRPC del enrutador de aplicaciones experimental en ./src/trpc/@trpc , que formatea las claves de consulta React-Query de una manera específica que cambiaron en versiones posteriores de TRPC. Si actualiza TRPC, la hidratación dejará de funcionar.
• Autenticación propia con Auth.Js.
  • Create-T3-APP usa NextAuth, que no admite el tiempo de ejecución de Edge. Este proyecto utiliza el sucesor de NextAuth, Auth.JS, que sí. Dado que Auth.js aún no ha creado soporte para Next.js, su implementación SolidStart se copia y se modifica ligeramente.
• Estilo con viento de cola.
  • Es solo CSS, por lo que funciona bien en el enrutador de aplicaciones.
• Reaccionar componentes y diseño de shadcn/ui
  • También son solo CSS y Radix, por lo que funcionan bien en el enrutador de aplicaciones.

Recaudación de datos

Hay algunas opciones que los componentes del servidor + TRPC + reaccionan la consulta que nos ofrece. La flexibilidad de estas herramientas nos permite usar diferentes estrategias para diferentes casos en el mismo proyecto.

1. Obtenga datos en el servidor y renderizar en el servidor o pasarlo a los componentes del cliente. Ejemplo.
2. Obtenga datos en el servidor y úselo para hidratar el caché de React-Query en el cliente. Ejemplo: obtener y deshidratar datos en el servidor, luego use datos en caché del servidor en el cliente.
3. Obtenga datos en el cliente.
4. Obtenga datos del servidor, pero no bloquee los componentes del primer byte y transmita al cliente utilizando un límite de suspenso. TODO: Ejemplo.

Empezando

1. Ejecutar algunos comandos.

   pnpm i
   cp .env.example .env

2. Llenar .env.

3. Empuje sus cambios de esquema a una nueva base de datos de PlanetScale. No use este comando en una base de datos existente que le importe. Es destructivo (y en beta).

   pnpm db:push

4. Inicie el servidor de desarrollo Next.js.

   pnpm dev