t3 app router edge drizzle

Router Aplikasi T3 (Edge)

Upaya eksperimental untuk menggunakan T3 Stack yang fantastis sepenuhnya pada runtime Edge, dengan router aplikasi beta Next.js.

Ini dimaksudkan untuk menjadi tempat peretasan dan pembelajaran. Kami masih belajar cara menyusun aplikasi menggunakan router aplikasi baru Next.js, dan komentar diterima dalam diskusi.

Jika Anda mengalami kesalahan (Anda akan), silakan buat masalah sehingga kami dapat memperbaiki bug dan belajar bersama.

Ini tidak dimaksudkan untuk produksi. Untuk aplikasi full-stack siap-produksi, gunakan Create-T3-App yang jauh lebih stabil.

Proyek ini tidak berafiliasi dengan CREATE-T3-APP.

Fitur

Proyek ini mewakili copy-pasting pekerjaan dan ide-ide dari banyak orang yang benar-benar pintar. Saya pikir itu berguna untuk melihat semuanya bersama dalam prototipe yang berfungsi.

• Edge Runtime untuk semua halaman dan rute.
• Tipe-aman SQL dan manajemen skema dengan gerimis-an.
  • Sementara Create-T3-App menggunakan prisma, Prisma tidak dapat berjalan di runtime tepi.
• API jenis-aman dengan TRPC.
  • Pengaturan router aplikasi disalin dari sini.
  • Versi TRPC yang diinstal saat ini terkunci ke klien router aplikasi eksperimental di ./src/trpc/@trpc , yang memformat tombol kueri reaksi-query dengan cara tertentu yang berubah dalam versi TRPC selanjutnya. Jika Anda meningkatkan TRPC, hidrasi akan berhenti bekerja.
• Otentikasi yang dimiliki dengan auth.js.
  • Create-T3-App menggunakan NextAuth, yang tidak mendukung runtime tepi. Proyek ini menggunakan penerus NextAuth, auth.js, yang melakukannya. Karena AUTH.JS belum membangun dukungan untuk Next.js, implementasi SolidStart mereka disalin dan sedikit dimodifikasi.
• Styling dengan Tailwind.
  • Ini hanya CSS, jadi berfungsi dengan baik di router aplikasi.
• Bereaksi komponen dan tata letak dari shadcn/ui
  • Mereka juga hanya CSS dan Radix, jadi mereka bekerja dengan baik di router aplikasi.

Pengambilan data

Ada beberapa opsi yang diberikan oleh komponen server + TRPC + React Query. Fleksibilitas alat ini memungkinkan kita untuk menggunakan strategi yang berbeda untuk kasus yang berbeda pada proyek yang sama.

1. Ambil data di server dan render di server atau berikan ke komponen klien. Contoh.
2. Ambil data di server dan gunakan untuk menghidrasi cache react-query pada klien. Contoh: Ambil data dan dehidrasi di server, lalu gunakan data yang di -cache dari server pada klien.
3. Ambil data pada klien.
4. Ambil data server tetapi jangan memblokir byte pertama dan stream komponen server ke klien menggunakan batas ketegangan. TODO: Contoh.

Memulai

1. Jalankan beberapa perintah.

   pnpm i
   cp .env.example .env

2. Isi .env.

3. Dorong perubahan skema Anda ke database PlanetScale baru. Jangan gunakan perintah ini pada database yang ada yang Anda pedulikan. Itu destruktif (dan dalam beta).

   pnpm db:push

4. Mulailah server dev berikutnya.

   pnpm dev