القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

قدم Next.js 13 نظام توجيه جديدًا باستخدام دليل التطبيقات. قدم Next.js 12 بالفعل طريقة سهلة للتعامل مع المسارات من خلال المسارات المستندة إلى الملفات. ستؤدي إضافة مكون إلى مجلد الصفحات إلى جعله مسارًا تلقائيًا. في هذا الإصدار الجديد ، يأتي جهاز التوجيه المستند إلى نظام الملفات مع إعداد مضمن للتخطيطات ، وتوجيه القوالب المتداخلة ، وواجهة مستخدم للتحميل ، ومعالجة الأخطاء ، ودعم مكونات الخادم والبث.

تشرح هذه المقالة هذه الميزات الجديدة وسبب أهميتها.

الشروع في العمل Next.js 13

قم بإنشاء مشروع Next.js 13 الخاص بك عن طريق تشغيل الأمر التالي في المحطة.

npx يخلق-التالي-app @ الأحدث next13 --تطبيق تجريبي

يجب أن يؤدي هذا إلى إنشاء مجلد جديد يسمى next13 مع دليل التطبيق الجديد.

التعرف على دليل التطبيقات الجديد

استخدم Next.js 12 ملف الصفحات دليل التوجيه ، ولكن يتم استبداله بملحق برنامج/ دليل في Next.js 13. ال صفحات / لا يزال الدليل يعمل في Next 13 للسماح بالاعتماد المتزايد. ما عليك سوى التأكد من عدم إنشاء ملفات في المجلدين لنفس المسار حيث ستحصل على خطأ.

instagram viewer

هذا هو الهيكل الحالي لدليل التطبيق.

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

  • page.tsx - الملف المستخدم لإنشاء واجهة المستخدم لمسار معين.
  • layout.tsx - يحتوي على تعريف تخطيط المسار ويمكن مشاركته عبر صفحات متعددة. إنها مثالية لقوائم التنقل والأشرطة الجانبية. أثناء التنقل ، تحتفظ التنسيقات بالحالة ولا تعيد العرض. هذا يعني أنه عند التنقل بين الصفحات التي تشترك في تخطيط ، تظل الحالة كما هي. شيء واحد يجب ملاحظته هو أنه يجب أن يكون هناك تخطيط علوي (تخطيط الجذر) يحتوي على جميع علامات HTML والجسم المشتركة عبر التطبيق بأكمله.
  • template.tsx - تشبه القوالب التنسيقات ولكنها لا تحافظ على الحالة ويتم إعادة عرضها في كل مرة يتم استخدامها لإنشاء صفحة. تعتبر القوالب مثالية للمواقف التي تحتاج فيها إلى رمز معين للتشغيل في كل مرة يتم فيها تثبيت المكون ، على سبيل المثال ، إدخال الرسوم المتحركة والخروج منها.
  • error.tsx - يستخدم هذا الملف لمعالجة الأخطاء في التطبيق. إنه يلف مسارًا بفئة حدود خطأ React بحيث عندما يحدث خطأ في ذلك المسار أو في توابعه ، فإنه يحاول الاسترداد منه عن طريق عرض صفحة خطأ سهلة الاستخدام.
  • loading.tsx - يتم تحميل واجهة مستخدم التحميل على الفور من الخادم أثناء تحميل واجهة المستخدم الخاصة بالمسار في الخلفية. يمكن أن تكون واجهة مستخدم التحميل عبارة عن شاشة دوّارة أو هيكلية. بمجرد تحميل محتوى المسار ، فإنه يحل محل واجهة مستخدم التحميل.
  • not-found.tsx - يتم عرض الملف not-found عندما يواجه Next.js ملف خطأ 404 لتلك الصفحة. في Next.js 12 ، يجب عليك إنشاء وإعداد صفحة 404 يدويًا.
  • head.tsx - يحدد هذا الملف علامة الرأس لمقطع المسار المحدد فيه.

كيفية إنشاء مسار في Next.js 13

كما ذكرنا من قبل ، يتم إنشاء المسارات باستخدام المجلدات الموجودة في ملف برنامج/ الدليل. داخل هذا المجلد ، يجب عليك إنشاء ملف يسمى page.tsx التي تحدد واجهة المستخدم لهذا المسار المحدد.

على سبيل المثال ، لإنشاء مسار بالمسار /products، سوف تحتاج إلى إنشاء التطبيق / المنتجات / page.tsx ملف.

للطرق المتداخلة مثل /products/sale، تتداخل المجلدات داخل بعضها البعض بحيث تبدو بنية المجلد التطبيق / المنتجات / بيع / page.tsx.

بصرف النظر عن طريقة جديدة لتوجيه ميزات أخرى مثيرة للاهتمام ، يدعم دليل التطبيق مكونات الخادم والتدفق.

استخدام مكونات الخادم في دليل التطبيقات

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

انظر هذا المقال على طرق عرض مختلفة في Next.js للحصول على شرح أكثر تفصيلاً.

يعني مكون الخادم أنه يمكنك الوصول بأمان إلى أسرار البيئة دون كشف جانب العميل. على سبيل المثال ، يمكنك استخدام ملفات عملية. env.

يمكنك أيضًا التفاعل مع الواجهة الخلفية مباشرةً. ليست هناك حاجة لاستخدام getServerSideProps أو getStaticProps كما يمكنك استخدام غير متزامن / انتظار في مكون الخادم لجلب البيانات.

ضع في اعتبارك هذه الوظيفة غير المتزامنة التي تجلب البيانات من واجهة برمجة التطبيقات.

غير متزامنوظيفةاحصل على البيانات() {
يحاول{
مقدار ثابت الدقة = انتظر أحضر(' https://api.example.com/...');
يعود res.json () ؛
 } يمسك(خطأ) {
يرميجديدخطأ("تعذر جلب البيانات")
 }
}

يمكنك تسميتها مباشرة على الصفحة كما يلي:

يصدّرتقصيرغير متزامنوظيفةصفحة() {
مقدار ثابت البيانات = انتظر احصل على البيانات()؛
يعود<شعبة>شعبة>;
}

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

تدفقات المكونات بشكل متزايد في دليل التطبيقات

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

  • خلق شيء loading.tsx الملف الذي سيتم عرضه لكامل جزء المسار. 
يصدّرتقصيروظيفةتحميل() {
يعود<ص>تحميل...ص>
}
  • التفاف المكونات الفردية بحدود React Suspense وتحديد واجهة مستخدم احتياطية. 
يستورد {تشويق} من"تتفاعل";
يستورد { منتجات } من"./عناصر";
يصدّرتقصيروظيفةأُوكَازيُون() {
يعود (
<قسم>
منتجات...
}>
<منتجات />
تشويق>
قسم>
 );
}

قبل عرض مكون المنتجات ، سيرى المستخدم "المنتجات ...". هذا أفضل من شاشة فارغة من حيث تجربة المستخدم.

الترقية إلى Next.js 13

يعد دليل التطبيق الجديد بالتأكيد تحسينًا عن دليل الصفحات السابق. يتضمن ملفات خاصة مثل التخطيط والرأس والقالب والخطأ وغير موجود والتحميل التي تتعامل مع حالات مختلفة عند عرض مسار دون الحاجة إلى إعداد يدوي.

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

ومع ذلك ، لا يزال بإمكانك الترقية إلى Next.js 13 نظرًا لأن دليل الصفحة لا يزال يعمل ، ثم ابدأ في استخدام دليل التطبيق وفقًا لسرعتك الخاصة.