مع إصدار Next.js App Router، يتوق العديد من المطورين إلى ترحيل مشاريعهم الحالية. في هذا المنشور، سأشارك تجربتي في ترحيل مشروع إلى Next.js App Router، بما في ذلك التحديات والتغييرات الرئيسية وكيف يمكنك جعل العملية أكثر سلاسة.

إنه نهج تدريجي، يمكنك استخدام جهاز توجيه الصفحة وجهاز توجيه التطبيق في وقت واحد.

لماذا تنتقل إلى جهاز توجيه تطبيق Next.js؟

يقدم جهاز توجيه التطبيقات العديد من المزايا:

• تحسين التوجيه: توجيه أكثر نظافة يعتمد على نظام الملفات.
• تحسينات العرض من جانب الخادم (SSR): معالجة أكثر كفاءة للبيانات من جانب الخادم.
• التعامل مع البيانات الوصفية: إدارة مبسطة لتحسين محركات البحث.
• تحسين الأداء: تحسينات مضمنة لمختلف المكونات.

من خلال الترحيل، يمكنك تحصين تطبيقك في المستقبل للاستفادة من أحدث ميزات Next.js.

خطوات الانتقال إلى جهاز توجيه التطبيق

• تحديث التبعيات

الخطوة الأولى هي التأكد من تحديث Next.js والتبعيات ذات الصلة. قم بتشغيل الأوامر التالية لتثبيت أحدث الإصدارات من Next.js وReact:

npm install next@latest react@latest react-dom@latest
npm install -D eslint-config-next@latest

• هيكلة مجلد التطبيق

يعتمد جهاز توجيه التطبيق على دليل التطبيق الجديد لإدارة المسارات والبيانات التعريفية والتخطيطات. وإليك كيفية تنظيمها:

مجلد التطبيق: انقل صفحاتك إلى مجلد التطبيق. أصبح لكل مسار الآن مجلد مخصص خاص به يحتوي على ملف page.tsx.

التخطيطات: أضف ملف Layout.tsx لتحديد التخطيطات لأقسام معينة من تطبيقك. وهذا مفيد بشكل خاص للتعامل مع المكونات المشتركة مثل أشرطة التنقل أو التذييلات.

• تغييرات جهاز التوجيه

أحد أهم التغييرات هو استبدال التالي/جهاز التوجيه بالتالي/الملاحة لوظيفة التوجيه والتنقل.

استبدل جميع الواردات التالية/جهاز التوجيه بالتنقل التالي/التنقل.
قم بتحديث وظائف مثل useRouter بمرادفات جديدة، مثل usePathname، وuseSearchParams، وuseRouter() حيثما كان ذلك مناسبًا.

• رمز الخادم المُعاد تصنيعه

تم إيقاف getServerSideProps وgetStaticProps في جهاز توجيه التطبيق.
استخدم مكونات الخادم غير المتزامنة أو إجراءات الخادم لجلب البيانات في الصفحات من جانب الخادم.

export async function getData() {
  const res = await fetch('https://getData.com/data');
  return res.json();
}

• التعامل مع المكونات من جانب العميل

مكونات العميل:
يجب وضع علامة على أي مكون يستخدم خطافات React أو واجهات برمجة تطبيقات المتصفح أو تفاعلات المستخدم بـ "استخدام العميل". هذا يخبر Next.js بعرضها على جانب العميل.

مكونات الخادم:
يمكن لأي مكون لا يتطلب التفاعل مع المتصفح أن يبقى كمكون خادم. تعتبر هذه أكثر كفاءة لأنها تتجنب شحن JavaScript غير الضروري إلى العميل.

• التعامل مع المكتبات الخارجية

إذا كنت تستخدم مكتبات خارجية مثل React Query أو AntDesign أو Framer وما إلى ذلك، فأنت بحاجة إلى تحديثها وإجراء التغييرات حسب الحاجة. لا يمكن تضمين كافة التغييرات في هذه المدونة. على الرغم من ذكر التغييرات في وثائقهم.

التحديات المشتركة أثناء الهجرة

• التعامل مع أحداث جهاز التوجيه:

مع التغيير من التالي/جهاز التوجيه إلى التالي/التنقل، قد يتطلب التعامل مع أحداث جهاز التوجيه أسلوبًا مختلفًا.
تأكد من تحديث أي مستمعين أو خطافات لأحداث جهاز التوجيه وفقًا لذلك.

• مشكلات تغيير التخطيط:

عند ترحيل الصفحات ذات التخطيطات المعقدة (خاصة تلك التي تحتوي على رسوم متحركة)، قد تلاحظ تغيرات في التخطيط. أضف عنصرًا نائبًا أو احتفظ بالمحاذاة المناسبة على جانب الخادم نفسه لمنع تغييرات التخطيط.

• تحديثات مكونات الصورة والارتباط:

يقدم جهاز توجيه التطبيق تغييرات على مكونات الصورة والرابط.
استخدم codemods لتحديث المكونات تلقائيًا.
بالنسبة لمكون الصورة، قم بإزالة السمات المهملة مثل الاستجابة.

• الرسوم المتحركة

يجب الاحتفاظ بالمكونات ذات الصلة بالرسوم المتحركة مثل ملفات الإطارات، والمسح الضوئي، وملفات المسروقات في جانب العميل.

خاتمة

يأتي الانتقال إلى Next.js App Router مصحوبًا بالتحديات ولكن أيضًا مع تحسينات كبيرة في الأداء وقابلية التوسع والمرونة. ومن خلال تقسيم الترحيل إلى أقسام يمكن التحكم فيها (على مستوى التطبيق، وعلى مستوى الصفحة، وتحديثات الميزات)، تمكنت من معالجة كل تغيير بشكل منهجي.

اسمحوا لي أن أعرف إذا كان لديك أي أسئلة أو نصائح من عمليات الترحيل الخاصة بك!