رحلتنا للهجرة إلى Next.js 13 App Router
تُفصل هذه المقالة عملية نقل مشروع عينة SDK الخاص بـ Logto إلى برنامج التوجيه الجديد Next.js 13 App Router، وتغطي خطوات إنشاء صفحات وتخطيطات جديدة، وتحويل مسارات API، واستخدام مكونات الخادم والعميل.
Developer
مقدمة
في Logto، نقدم SDK لـ Next.js باسم @logto/next، يصاحبه مشروع عينة. يوضح هذا المشروع بشكل فعال كيفية دمج Logto مع Next.js باستخدام المجلد التقليدي "pages"، مع تقديم أمثلة لمسارات API، getServerSideProps، الجلب من جانب العميل، وحتى تشغيل الحافة.
جلب لنا Next.js 13 App Router الثوري (كان يسمى سابقًا دليل التطبيق)، مما قدم ميزات جديدة وتقاليد أصبحت سريعًا شائعة في مجتمع المطورين. نظرًا لأن SDK الخاص بـ Logto لـ Next.js يدعم تمامًا هذه الميزات الجديدة، استلهمنا إنشاء مشروع عينة جديد باستخدام هذا App Router.
في هذه المقالة، سوف نستعرض تفاصيل تحويل مشروع عيّنتنا القديم إلى الجديد باستخدام App Router. بُني المشروع على أساس مشروع العينة القديمة واتبع الدليل الرسمي لتحويل guide. وشمل ذلك عدة خطوات: إنشاء صفحات وتخطيطات، هجرت مسارات الـ API، واستخدام مكونات الخادم والعميل.
عملية التحويل
تخطيط الصفحة: هيكل جديد
في إعدادنا الأصلي، استخدمنا ملف _app.tsx لإعداد المجلب SWR وملف index.tsx كان يعمل كصفحة رئيسية.
مع App Router، أصبحوا layout.tsx و page.tsx. يحتوي ملف layout.tsx على المعلومات الأساسية، بينما يعكس page.tsx وظيفة الملف القديم index.tsx.
مكون العميل
واجهتنا مشكلة عند الخطوة الأولى: تعيين معالج "onClick" للزر لم يكن ناجحًا، مما أدى إلى ظهور رسالة خطأ تقول، "Event handlers لا يمكن تمريرها إلى خصائص مكون العميل. إذا كنت بحاجة إلى تفاعلية، فكر في تحويل جزء من هذا إلى مكون عميل."
لحل هذه المشكلة، استخرجنا الجزء المشكل إلى مكون منفصل وسبقنا الملف بـ use client:
مسارات API
كان نقل مسارات API بسيطًا كتطوير الملفات السابقة من /pages/api إلى /app/api مع بعض التعديلات:
- تم إعادة تسمية
index.tsإلىroute.ts. - تم إعادة تسمية الوظيفة المصدرة إلى
GETأو أي اسم طريقة ذو صلة.
مكون الخادم
داخل مجلد api، لدينا القدرة على إضافة وظائف server-only، التي تسمح لمكونات خادم React بجلب البيانات.
في دليل /app/api/logto/user، يوجد ملف get-user.tsx:
يمكن بعد ذلك استدعاء هذه الوظيفة في page.tsx:
الخلاصة
عند إكمال عملية التحويل، وجدنا أن رمزنا وهيكلنا أصبح أكثر انسيابية وبديهية بشكل كبير. على الرغم من أنه بدا تحديًا في البداية، فإن العملية كانت بعيدة عن التعقيد. نأمل أن تكون تجربتنا بمثابة دليل قيم، يساعدك في تحويل مشاريعك إلى App Router بثقة.
للمقارنة، هنا روابط مشاريعنا، قبل وبعد التحويل:
قبل: https://github.com/logto-io/js/tree/master/packages/next-sample
بعد: https://github.com/logto-io/js/tree/master/packages/next-app-dir-sample
من خلال فحص هذه المشاريع، يمكنك الحصول على فهم أوضح للتغييرات والفوائد التي قدمتها هذه الهجرة.