تحديث موجه التطبيق (App Router) في Next.js

يمثل موجه التطبيق (App Router) أساسًا جديدًا لمستقبل Next.js، لكننا ندرك أن هناك فرصًا لتحسين التجربة. نود تقديم تحديث حول أولوياتنا الحالية.

لإصدارات Next.js القادمة، نركز على المجالات التالية:

• تحسين الأداء
• تحسين الاستقرار
• تحسين تعليم المطورين

موجه التطبيق (App Router)

أولاً، من المفيد تقديم بعض السياق حول كيفية تصميم موجه التطبيق.

التوسع خارج موجه الصفحات (Pages Router) من خلال المحاذاة مع React

مع زيادة الاعتماد وتطبيقات أكبر حجمًا تُبنى باستخدام Next.js، تلقينا ملاحظات من المجتمع وحددنا مجالات بدأنا فيها بالوصول إلى حدود موجه الصفحات (Pages Router).

الأهم من ذلك، أن موجه الصفحات (Pages Router) في Next.js لم يُصمم للبث (streaming)، وهو حجر أساس في React الحديث، مما يساعدنا في معالجة القيود التي واجهناها وتحقيق رؤيتنا طويلة المدى لـ Next.js.

تتطلب إنشاء واجهات برمجة تطبيقات (APIs) إطار عمل صديقة للبث لجلب البيانات وتحميل الأصول وبيانات الصفحة، بالإضافة إلى الاستفادة من البدائيات الأحدث في React، تغييرات كبيرة في البنية الأساسية لـ Next.js.

استغللنا الفرصة للبناء على أحدث ميزات React المتزامنة، مثل مكونات الخادم (Server Components) وSuspense وغيرها، والتي تم تصميمها لبنى البث.

التبني التدريجي غير قابل للتفاوض

لم نرغب في أن يضطر مجتمعنا إلى إعادة بناء تطبيقاتهم بالكامل من الصفر للترقية إلى أحدث إصدار من Next.js. نؤمن أن التبني التدريجي هو أفضل استراتيجية لتطوير التطبيقات بمرور الوقت.

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

نستكشف فرصًا إضافية لجعل التبني التدريجي أسهل.

الطريق إلى الاستقرار

بدأنا بناء موجه التطبيق (App Router) في Next.js منذ أكثر من عام وكنا نطلق باستمرار ميزات وتحسينات جديدة منذ ذلك الحين.

• الإعلان الأولي: في مايو من ذلك العام، أصدرنا طلب تعليقات (RFC) لتوضيح خططنا لجعل التوجيه والتخطيطات أكثر مرونة.
• الإصدار التجريبي المبكر: في Next.js 13، أصدرنا الإصدار الأول من موجه التطبيق، مما سمح للمجتمع بتجربته وتقديم ملاحظات مبكرة.
• واجهة برمجة التطبيقات (API) المستقرة: استجابة للملاحظات، ركزنا جهودنا على إنهاء واجهة برمجة التطبيقات الأساسية. في الإصدار 13.4، صنفنا واجهة برمجة التطبيقات الأساسية لموجه التطبيق على أنها مستقرة وجاهزة للتبني الأوسع.

تركيزنا الحالي

أشار الإعلان عن الاستقرار إلى المجتمع أن واجهة برمجة التطبيقات الأساسية قد استقرت ولن تخضع لتغييرات كبيرة تتطلب إعادة كتابة.

منذ ذلك الحين، تلقينا الكثير من الملاحظات القيمة وكشف التبني المتزايد عن أخطاء وفرص لمزيد من التحسين.

نريد أن تعلم أننا لسنا راضين بعد عن تجربة استخدام موجه التطبيق وهو أولويتنا الرئيسية للمضي قدمًا. لذا، لنتحدث عن العمل الذي نقوم به لتحسين هذه التجربة.

تحسين الأداء

خلال الأشهر القادمة، نركز على ثلاثة جوانب من الأداء: سرعة التكرار المحلي، أوقات بناء الإنتاج، وأداء الخادم بدون خادم (serverless).

أداء التطوير المحلي

مع نضوج Next.js، ونمو حجم التطبيقات المبنية بها، كنا نستبدل تدريجياً أجزاء من بنيتها الأساسية بأدوات أسرع وأكثر قابلية للتوسع.

• تقدم الهجرة: بدأنا باستبدال Babel (التجميع) وTerser (التصغير) بـ SWC. ساعد هذا في تحسين سرعات التكرار المحلي وأوقات بناء الإنتاج.

• استثمار طويل المدى: الحفاظ على أداء تحديث سريع (Fast Refresh) رائع بغض النظر عن حجم التطبيقات يعني جعل Next.js تعمل بشكل تدريجي قدر الإمكان أثناء التطوير المحلي، عن طريق تجميع وتجميع التعليمات البرمجية عند الحاجة فقط.

  لهذا السبب نعمل حاليًا على استبدال webpack (التجميع) بـ Turbopack، الذي يُبنى على محرك حساب تدريجي منخفض المستوى يمكّن التخزين المؤقت حتى مستوى الوظائف الفردية.

  ستشهد تطبيقات Next.js التي تنتقل إلى Turbopack تحسينات مستمرة في سرعة التحديث السريع حتى مع زيادة حجمها.

  في الأشهر القليلة الماضية، ركز فريق Turbo على تحسين أداء Turbopack والدعم لجميع ميزات Next.js وواجهات برمجة تطبيقات موجه التطبيق.

  يتوفر Turbopack حاليًا في النسخة التجريبية (next dev --turbo).

• تحسين البنية الحالية: بالإضافة إلى الاستثمار في المستقبل، نواصل إجراء تحسينات الأداء على بنية webpack الحالية.

  بالنسبة لبعض تطبيقات Next.js، خاصة تلك التي تعيد تحميل آلاف الوحدات، رأينا تقارير عن عدم استقرار في التطوير المحلي والتحديث السريع. نعمل على تحسين الأداء والموثوقية هنا. على سبيل المثال، أضفنا مؤخرًا إعدادات مُهيأة مسبقًا (modularizeImports) للتعامل مع مكتبات الأيقونات الكبيرة التي قد تجبر آلاف الوحدات على إعادة التحميل في كل طلب عن طريق الخطأ.

أداء وقت البناء

نعمل أيضًا على بناء إنتاج باستخدام Turbopack (next build --turbo) وبدأنا في إدراج الأجزاء الأولى من هذا العمل. توقع المزيد من التحديثات حول هذا في الإصدارات القادمة.

أداء الإنتاج

أخيرًا، على Vercel، نعمل على تحسين أداء واستخدام الذاكرة لوظائف Vercel المحددة من خلال كود تطبيق Next.js، مع ضمان أقل وقت بدء بارد مع الاحتفاظ بمزايا بنية الخادم بدون خادم القابلة للتوسع. أدى هذا العمل إلى قدرات تتبع جديدة (تجريبية) في Next.js واستكشافات مبكرة لأدوات المطور من جانب الخادم.

تحسين الاستقرار

كان موجه الصفحات (Pages Router) موجودًا منذ ست سنوات الآن. يعني إصدار موجه التطبيق (App Router) تقديم واجهات برمجة تطبيقات جديدة لا تزال حديثة، مع ستة أشهر فقط من الاستخدام. قطعنا شوطًا كبيرًا في وقت قصير، لكن لا تزال هناك فرص للتحسن مع تعلم المزيد من مجتمعنا وكيفية استخدامهم له.

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

منذ الإصدار 13.4، أصلحنا بالفعل عددًا من الأخطاء عالية التأثير حول الاستقرار المتوفرة في أحدث إصدار تصحيح (13.4.7). سنواصل التركيز على الأداء والاستقرار بكثافة عالية.

تحسين تعليم المطورين

بينما نؤمن بأن الميزات الجديدة لموجه التطبيق وReact الحديثة قوية، إلا أنها تتطلب أيضًا تعليمًا وثائقًا إضافية لمساعدة في تعليم هذه المفاهيم الجديدة.

ميزات Next.js

كنا نعمل خلال العام الماضي على إعادة كتابة وثائق Next.js من الصفر. هذا العمل متاح الآن على nextjs.org/docs. نود تسليط الضوء على بعض الأجزاء المهمة:

• تبديل بين الصفحات والتطبيق: يمكنك التبديل بين تعلم وثائق موجه الصفحات أو موجه التطبيق باستخدام الزر على الجانب الأيسر من الوثائق. علاوة على ذلك، يمكنك تصفية نتائج البحث بناءً على اختيارك للموجه.
• محتوى محسن وهيكل معلومات: تم تحديث كل صفحة تقريبًا من وثائق موجه التطبيق، بما في ذلك هيكل أكثر وضوحًا وتماسكًا بين الصفحات، ومئات الرسوم التوضيحية الجديدة لشرح كيفية عمل Next.js بصريًا.
• المزيد قادم: لدينا المزيد من العمل هنا. يعمل فريق تجربة المطور (Developer Experience) في Vercel بجد لتوفير موارد تعليمية إضافية (بما في ذلك دورة محدثة على /learn لتعليم موجه التطبيق) وأمثلة على أكواد واقعية (بما في ذلك إعادة كتابة Next.js Commerce).

سنصدر محتوى جديدًا في الوثائق، وعلى تويتر، ويوتيوب، والمزيد.

ميزات React الجديدة

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

• مكونات الخادم (Server Components): من المهم ملاحظة أن ميزات مثل مكونات الخادم واتفاقيات مثل توجيه "use client" ليست خاصة بـ Next.js، ولكنها جزء أكبر من نظام React البيئي.

  يعمل فريقنا وشركاؤنا في Meta ومساهمون مستقلون آخرون على توفير المزيد من التعليم حول هذه المواضيع. إنها أيام مبكرة لهذه المفاهيم، لكننا واثقون في نظام React البيئي والتعليم المستمر.

• مكونات العميل (Client Components): مع الحديث الأخير حول مكونات الخادم، من المهم ملاحظة أن مكونات العميل ليست إزالة تحسين. العميل جزء صالح من نموذج React ولن يختفي.

  يمكنك التفكير في مكونات العميل كنظام Next.js البيئي الحالي، حيث تستمر المكتبات والأدوات المفضلة لديك في العمل. على سبيل المثال، سؤال شائع رأيناه هو ما إذا كان يجب إضافة "use client" إلى كل ملف لجعله مكون عميل. هذا ليس ضروريًا، لكننا نفهم أن هذه المفاهيم جديدة وستستغرق وقتًا للتعلم. تحتاج فقط إلى وضع علامة على الحد الأعلى حيث ينتقل الكود بين الخادم والعميل. تسمح هذه البنية لك بدمج مكونات الخادم والعميل معًا.

• نظام بيئي تابع لجهات خارجية في نمو: بالإضافة إلى التعليم، لا يزال النظام البيئي حول ميزات React الأحدث في نمو. على سبيل المثال، أعلنت Panda CSS، مكتبة CSS-in-JS من صانعي Chakra UI، مؤخرًا عن دعم مكونات خادم React.

• إجراءات الخادم (Alpha): تمكن إجراءات الخادم تحويلات بيانات جانب الخادم، وتقليل JavaScript جانب العميل، والنماذج المحسنة تدريجيًا. لا نوصي باستخدام إجراءات الخادم في الإنتاج بعد. نقدر الملاحظات المبكرة من مستخدمي الإصدار التجريبي الذين يساعدوننا في تشكيل مستقبل هذه الميزة.

شكرًا لكم

نشكر الكثير منكم لاختياركم التعلم والبناء باستخدام Next.js.

سيظهر تركيزنا على الأداء والاستقرار وتجربة المطور في الإصدارات القادمة من Next.js. نريد أن يكون استخدام Next.js ممتعًا - وأن يجعلكم (وفريقكم) أكثر إنتاجية.

كالعادة، نقدر ملاحظاتكم كثيرًا. إذا واجهتم أي مشكلات مع Next.js، يرجى فتح مشكلة، أو بدء مناقشة جديدة، وسنقوم بالتحقيق.