موجه التطبيق (App Router)
موجه التطبيق (App Router) في Next.js هو نموذج جديد لبناء التطبيقات باستخدام أحدث ميزات React. إذا كنت معتادًا على Next.js، فستجد أن موجه التطبيق هو تطور طبيعي لموجه نظام الملفات الحالي في موجه الصفحات (Pages Router).
للتطبيقات الجديدة، نوصي باستخدام موجه التطبيق. بالنسبة للتطبيقات الحالية، يمكنك تبني موجه التطبيق تدريجيًا. من الممكن أيضًا استخدام كلا الموجهين في نفس التطبيق.
الأسئلة الشائعة
كيف يمكنني الوصول إلى كائن الطلب (request object) في التخطيط؟
لا يمكنك عمدًا الوصول إلى كائن الطلب الخام. ومع ذلك، يمكنك الوصول إلى headers و cookies من خلال دوال الخادم فقط. يمكنك أيضًا تعيين ملفات تعريف الارتباط (cookies).
التخطيطات (Layouts) لا يتم إعادة عرضها. يمكن تخزينها مؤقتًا وإعادة استخدامها لتجنب الحسابات غير الضرورية عند التنقل بين الصفحات. من خلال منع التخطيطات من الوصول إلى الطلب الخام، يمكن لـ Next.js منع تنفيذ التعليمات البرمجية للمستخدم التي قد تكون بطيئة أو مكلفة داخل التخطيط، مما قد يؤثر سلبًا على الأداء.
هذا التصميم يضمن أيضًا سلوكًا متسقًا ومتوقعًا للتخطيطات عبر الصفحات المختلفة، مما يبسط التطوير والتصحيح حيث يمكن للمطورين الاعتماد على أن التخطيطات تتصرف بنفس الطريقة بغض النظر عن الصفحة المحددة المطبقة عليها.
اعتمادًا على نمط واجهة المستخدم الذي تقوم ببنائه، المسارات المتوازية (Parallel Routes) تتيح لك عرض صفحات متعددة في نفس التخطيط، وللصفحات حق الوصول إلى مقاطع المسار (route segments) وكذلك معلمات البحث في URL.
كيف يمكنني الوصول إلى URL في صفحة؟
بشكل افتراضي، الصفحات هي مكونات خادم (Server Components). يمكنك الوصول إلى مقاطع المسار من خلال خاصية params ومعلمات البحث في URL من خلال خاصية searchParams لصفحة معينة.
إذا كنت تستخدم مكونات العميل (Client Components)، يمكنك استخدام usePathname، useSelectedLayoutSegment، و useSelectedLayoutSegments للمسارات الأكثر تعقيدًا.
علاوة على ذلك، اعتمادًا على نمط واجهة المستخدم الذي تقوم ببنائه، المسارات المتوازية (Parallel Routes) تتيح لك عرض صفحات متعددة في نفس التخطيط، وللصفحات حق الوصول إلى مقاطع المسار وكذلك معلمات البحث في URL.
كيف يمكنني إعادة التوجيه من مكون خادم؟
يمكنك استخدام redirect لإعادة التوجيه من صفحة إلى عنوان URL نسبي أو مطلق. redirect هو إعادة توجيه مؤقتة (307)، بينما permanentRedirect هو إعادة توجيه دائمة (308). عند استخدام هذه الدوال أثناء بث واجهة المستخدم، ستقوم بإدراج وسم meta لإصدار إعادة التوجيه على جانب العميل.
كيف يمكنني التعامل مع المصادقة باستخدام موجه التطبيق؟
فيما يلي بعض حلول المصادقة الشائعة التي تدعم موجه التطبيق:
- NextAuth.js
- Clerk
- Auth0
- Stytch
- أو التعامل اليدوي مع الجلسات أو رموز JWT
كيف يمكنني تعيين ملفات تعريف الارتباط (cookies)؟
يمكنك تعيين ملفات تعريف الارتباط في الإجراءات الخادمية (Server Actions) أو معالجات المسار (Route Handlers) باستخدام دالة cookies.
نظرًا لأن HTTP لا يسمح بتعيين ملفات تعريف الارتباط بعد بدء البث، لا يمكنك تعيين ملفات تعريف الارتباط مباشرة من صفحة أو تخطيط. يمكنك أيضًا تعيين ملفات تعريف الارتباط من البرمجيات الوسيطة (Middleware).
كيف يمكنني بناء تطبيقات متعددة المستأجرين (multi-tenant)؟
إذا كنت تبحث عن بناء تطبيق Next.js واحد يخدم عدة مستأجرين، فقد قمنا ببناء مثال يوضح بنيتنا الموصى بها.
كيف يمكنني إبطال ذاكرة التخزين المؤقت لموجه التطبيق؟
هناك طبقات متعددة من التخزين المؤقت في Next.js، وبالتالي، طرق متعددة لإبطال أجزاء مختلفة من الذاكرة المؤقتة. تعرف المزيد عن التخزين المؤقت.
هل هناك أي تطبيقات شاملة مفتوحة المصدر مبنية على موجه التطبيق؟
نعم. يمكنك عرض Next.js Commerce أو Platforms Starter Kit للحصول على مثالين أكبر لاستخدام موجه التطبيق مفتوحة المصدر.