الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

T3 APP Router (EDGE)

محاولة تجريبية لاستخدام مكدس T3 الرائع بالكامل على وقت تشغيل Edge ، مع جهاز التوجيه التجريبي لـ NEXT.JS.

من المفترض أن يكون هذا مكانًا للقرصنة والتعلم. ما زلنا نتعلم كيفية تنظيم التطبيقات باستخدام جهاز التوجيه الجديد لـ Next.js ، والتعليقات مرحب بها في المناقشات.

إذا واجهت خطأ (ستفعل) ، فيرجى إنشاء مشكلة حتى نتمكن من إصلاح الأخطاء والتعلم معًا.

هذا غير مخصص للإنتاج. لتطبيق كامل المكاسب جاهزة للإنتاج ، استخدم تطبيق Create-T3-T3 أكثر استقرارًا.

هذا المشروع لا ينتمي إلى Create-T3-APP.

سمات

يمثل هذا المشروع نسخ العمل والأفكار من الكثير من الأشخاص الأذكياء حقًا. أعتقد أنه من المفيد رؤيتهم جميعًا معًا في نموذج أولي للعمل.

  • وقت تشغيل الحافة لجميع الصفحات والطرق.
  • نوع SQL الآمن وإدارة المخطط مع الرذاذ.
    • على الرغم من أن Create-T3-App يستخدم Prisma ، فإن Prisma لا يمكن تشغيله على وقت تشغيل الحافة.
  • API من النوع الآمن مع TRPC.
    • يتم نسخ إعداد جهاز توجيه التطبيق من هنا.
    • يتم تأمين إصدار TRPC المثبت حاليًا على عميل TRPC للتطبيق التجريبي في ./src/trpc/@trpc ، والذي يتصرف مفاتيح استعلام React-Query بطريقة محددة تغيرت في إصدارات لاحقة من TRPC. إذا قمت بترقية TRPC ، فسيتوقف الترطيب عن العمل.
  • المصادقة المملوكة مع Auth.js.
    • يستخدم Create-T3-App NextAuth ، والذي لا يدعم وقت تشغيل الحافة. يستخدم هذا المشروع خليفة Nextauth ، Auth.js ، وهو ما يفعل. نظرًا لأن Auth.js لم يقم ببناء الدعم لـ Next.js حتى الآن ، يتم نسخ تنفيذ SolidStart الخاص بهم وتعديله قليلاً.
  • التصميم مع Tailwind.
    • إنه مجرد CSS ، لذلك يعمل بشكل جيد في جهاز توجيه التطبيق.
  • رد فعل المكونات والتخطيط من Shadcn/UI
    • كما أنها مجرد CSS و Radix ، لذلك فهي تعمل بشكل جيد في جهاز توجيه التطبيق.

جلب البيانات

هناك بعض الخيارات التي يوفرها لنا مكونات الخادم + TRPC + React. تتيح لنا مرونة هذه الأدوات استخدام استراتيجيات مختلفة لحالات مختلفة في نفس المشروع.

  1. قم بإحضار البيانات على الخادم وتقديمها على الخادم أو تمريرها إلى مكونات العميل. مثال.
  2. قم بإحضار البيانات على الخادم واستخدمها لترطيب ذاكرة التخزين المؤقت لـ React-Query على العميل. مثال: جلب البيانات والجفاف على الخادم ، ثم استخدم البيانات المخزنة من الخادم على العميل.
  3. جلب البيانات على العميل.
  4. جلب البيانات الخادم ولكن لا تمنع مكونات البايت الأولى ودفق الخادم إلى العميل باستخدام حدود التشويق. تودو: مثال.

ابدء

  1. تشغيل بعض الأوامر. 

    pnpm i
cp .env.example .env

  2. املأ. env.

  3. ادفع تغيير المخطط الخاص بك إلى قاعدة بيانات PlanetScale الجديدة. لا تستخدم هذا الأمر على قاعدة بيانات موجودة تهتم بها. إنه مدمر (وفي بيتا). 

    pnpm db:push

  4. ابدأ خادم Dev Next.js. 

    pnpm dev
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل