الإصدار 10 من Next.js

نحن متحمسون للإعلان عن الإصدار 10 من Next.js، الذي يتضمن:

• مكون الصورة المدمج وتحسين الصور التلقائي: تحسين الصور تلقائيًا باستخدام مكون next/image الجديد
• التوجيه الدولي: ابدأ في تدويل تطبيقات Next.js باستخدام الأدوات المدمجة
• تحليلات Next.js: قياس وتحسين أداء المستخدمين الحقيقيين
• Next.js Commerce: مجموعة أدوات متكاملة لمواقع التجارة الإلكترونية عالية الأداء
• دعم React 17: الإصدار الأخير من React متوافق بالكامل مع Next.js
• تحديث سريع لـ getStaticProps / getServerSideProps: إعادة تحميل تلقائي للخصائص عند تعديل طرق جلب البيانات
• تحديث سريع لـ MDX: عند استخدام @next/mdx، يتم الآن استخدام التحديث السريع لتطبيق التغييرات دون إعادة تحميل الصفحة بالكامل
• استيراد CSS من مكونات React الخارجية: أصبح من الممكن الآن استيراد CSS المطلوب للمكونات من npm
• حل تلقائي لـ href: لم تعد هناك حاجة إلى خاصية as في next/link
• واجهة سطر الأوامر @next/codemod: توفير وصول أسهل إلى جميع تحويلات الأكواد في Next.js
• صفحة انتظار لـ getStaticPaths: انتظر التصيير المسبق عند إنشاء صفحات ثابتة جديدة بدلاً من تقديم صفحة انتظار ثابتة

مكون الصورة المدمج وتحسين الصور التلقائي

هدفنا في Next.js هو تحسين شيئين: تجربة المطور وتجربة المستخدم.

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

قدمنا أكثر من 20 ميزة جديدة لتحسين الأداء وتجربة المطور. في نفس الوقت، انخفض حجم نواة Next.js بنسبة 16%.

في يناير، قدمنا استراتيجية جديدة رائدة لتقسيم كود JavaScript بالتعاون مع فريق Google Chrome.

على سبيل المثال، شهدت Barnebys انخفاضًا بنسبة 23% في حجم التطبيق، بينما حققت Sumup انخفاضًا بنسبة 70% في أكبر حزمة JavaScript لديها. تم تحقيق هذه التحسينات دون تغيير أي كود في تطبيقات Next.js الخاصة بهم.

تبنت الشركات هذه الاستراتيجية الجديدة تلقائيًا بمجرد ترقية Next.js إلى أحدث إصدار.

الصور على الويب

بينما حقق تركيزنا على تقليل كمية JavaScript نجاحًا، الويب ليس فقط JavaScript: إنه أيضًا ترميز وصور.

تستهلك الصور 50% من إجمالي البايتات في صفحات الويب.

للصور تأثير كبير على مؤشر Largest Contentful Paint حيث أنها غالبًا ما تكون العنصر الأكبر مرئيًا عند تحميل الصفحة. يعتبر Largest Contentful Paint من المقاييس الأساسية التي ستستخدمها Google في ترتيب البحث قريبًا جدًا.

نصف الصور حجمها أكبر من ميجابايت واحد، مما يعني أنها غير محسنة للعرض على الويب.

يستخدم المستخدمون اليوم هواتفهم وأجهزة اللوحة وأجهزة الكمبيوتر المحمولة لتصفح الويب، لكن الصور لا تزال بحجم واحد يناسب الجميع. على سبيل المثال: تحمّل المواقع صورة بحجم 2000 × 2000 بكسل، بينما تعرض الهواتف الصورة بحجم 100 × 100 بكسل فقط.

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

غالبًا لا تحتوي الصور على خصائص width و height، مما يتسبب في قفزها عند تحميل الصفحة. وهذا يؤثر سلبًا على مؤشر Cumulative Layout Shift الأساسي.

99.7% من الصور على مواقع الويب لا تستخدم تنسيقات الصور الحديثة مثل WebP.

لاستخدام الصور في صفحات الويب بطريقة فعالة، يجب مراعاة العديد من الجوانب: الحجم، الوزن، التحميل المتأخر، وتنسيقات الصور الحديثة.

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

هذه المهمة المستحيلة تؤدي حتمًا إلى تجربة مستخدم محبطة.

مكون صورة Next.js

يسعدنا الإعلان عن حلنا للصور الفعالة على الويب: مكون صورة Next.js وتحسين الصور التلقائي.

في أبسط أشكاله، مكون صورة Next.js هو مجرد بديل لعنصر HTML <img>، متطور للويب الحديث.

<img
  src="/profile-picture.jpg"
  width="400"
  height="400"
  alt="Profile Picture"
/>

import Image from 'next/image';
<Image
  src="/profile-picture.jpg"
  width="400"
  height="400"
  alt="Profile Picture"
/>;

ساعد فريق Google Chrome في إنشاء هذا المكون لتحسين أداء الصفحة من خلال جعل أفضل الممارسات افتراضية.

عند استخدام مكون next/image، يتم تحميل الصور بشكل متأخر تلقائيًا، مما يعني أنها تُعرض فقط عندما يقترب المستخدم من رؤية الصورة. هذا يمنع تحميل تلك الـ 30% من الصور خارج نطاق العرض الأولي.

يتم فرض أبعاد الصور، مما يسمح للمتصفحات بعرض المساحة المطلوبة للصورة على الفور بدلاً من قفزها عند التحميل، مما يمنع تغيير التخطيط.

بينما قد تسبب خصائص width و height في عنصر HTML <img> مشاكل مع التخطيطات المتجاوبة، هذا ليس هو الحال عند استخدام next/image. عند استخدام next/image، تصبح الصورة متجاوبة تلقائيًا بناءً على نسبة العرض إلى الارتفاع من width و height المقدمين.

يمكن للمطورين تحديد الصور الموجودة في نطاق العرض الأولي، مما يسمح لـ Next.js بتحميلها مسبقًا تلقائيًا. أظهر تحميل الصور مسبقًا تحسينات في مؤشر Largest Contentful Paint تصل إلى 50%.

تحسين الصور التلقائي

حتى مع هذه التحسينات مقارنة بعنصر HTML <img>، لا تزال هناك مشكلة رئيسية. يتم إرسال صورة 2000 × 2000 بكسل إلى الهواتف التي تعرض صورة أصغر.

مع Next.js 10، نحن نحل هذه المشكلة أيضًا. سيقوم مكون next/image بإنشاء أحجام أصغر تلقائيًا من خلال تحسين الصور المدمج.

يقوم تحسين الصور المدمج بتقديم الصور بتنسيقات صور حديثة مثل WebP، الذي يكون أصغر بنحو 30% من JPEG، إذا كان المتصفح يدعمه. كما يسمح لـ Next.js بتبني تنسيقات الصور المستقبلية تلقائيًا وتقديمها للمتصفحات التي تدعم هذه التنسيقات.

يعمل تحسين الصور مع أي مصدر للصور. حتى إذا كانت الصور تأتي من مصدر بيانات خارجي، مثل نظام إدارة المحتوى، يتم تحسينها.

بدلاً من تحسين الصور في وقت البناء، يقوم Next.js 10 بتحسين الصور عند الطلب، عندما يطلبها المستخدمون. على عكس مولدات المواقع الثابتة والحلول الثابتة فقط، لا تزداد أوقات البناء لديك، سواء كنت تشحن 10 صور أو 10 ملايين صورة.

الخلاصة

يوفر مكون next/image الجديد وتحسين الصور التلقائي أدوات قوية ستُحسن تجربة المستخدم بشكل كبير.

يتعامل مكون next/image مع التحميل المتأخر التلقائي، التحميل المسبق للصور الحرجة، تحديد الحجم الصحيح عبر الأجهزة، ويدعم تلقائيًا التنسيقات الحديثة. تعمل هذه الميزات مع الصور من أي مصدر.

نتطلع إلى رؤية مدى تحسن تجربة المستخدم لديك باستخدام هذه الأدوات الجديدة.

لمزيد من التفاصيل، راجع توثيق مكون صورة Next.js وتحسين الصور التلقائي.

التوجيه الدولي

هذا العام، ساعدت العديد من الشركات وأعضاء المجتمع فريقنا على فهم أهمية التدويل.

على سبيل المثال، تعلمنا أن 72% من المستهلكين أكثر احتمالية للبقاء على موقعك إذا تمت ترجمته و55% من المستهلكين قالوا أنهم يشترون فقط من مواقع التجارة الإلكترونية بلغتهم الأم.

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

يتكون تدويل المشروع من ركيزتين رئيسيتين: الترجمات والتوجيه.

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

لهذا السبب، كجزء من Next.js 10، نطلق دعمًا مدمجًا للتوجيه الدولي واكتشاف اللغة.

يدعم هذا الدعم المدمج استراتيجية Next.js الهجينة، بحيث يمكنك الاختيار بين التوليد الثابت أو التصيير من جانب الخادم على أساس كل صفحة.

يدعم Next.js 10 استراتيجيتي التوجيه الأكثر شيوعًا: توجيه المسار الفرعي وتوجيه النطاق.

لكلا الاستراتيجيتين، تبدأ بتكوين اللغات في تكوين Next.js.

module.exports = {
  i18n: {
    locales: ['en', 'nl'],
    defaultLocale: 'en',
  },
};

اللغات هي معرفات UTS Locale، تنسيق معياري لتعريف اللغات.

بشكل عام، يتكون معرف اللغة من لغة، منطقة، ونص مفصولة بشرطة: language-region-script. المنطقة والنص اختيارية. مثال:

• en-US - الإنجليزية كما تُستخدم في الولايات المتحدة
• nl-NL - الهولندية كما تُستخدم في هولندا
• nl - الهولندية، بدون منطقة محددة

بعد تكوين اللغات، يمكنك اختيار توجيه المسار الفرعي أو توجيه النطاق.

توجيه المسار الفرعي

يضع توجيه المسار الفرعي اللغة في عنوان URL. هذا يسمح لجميع اللغات بالعيش على نطاق واحد.

على سبيل المثال، يمكنك إدراج اللغة في عنوان URL مثل /nl-nl/blog و /en/blog.

توجيه النطاق

يسمح لك توجيه النطاق بربط لغة بنطاق رئيسي. على سبيل المثال، يمكن ربط example.nl باللغة nl و example.com باللغة en.

يتطلب توجيه النطاق بعض التكوين الإضافي لمعرفة كيفية توجيه النطاقات:

module.exports = {
  i18n: {
    locales: ['en', 'nl'],
    domains: [
      {
        domain: 'example.com',
        defaultLocale: 'en',
      },
      {
        domain: 'example.nl',
        defaultLocale: 'nl',
      },
    ],
  },
};

اكتشاف اللغة

يحتوي Next.js 10 على اكتشاف لغة مدمج في المسار / بناءً على رأس Accept-Language، الذي تدعمه جميع المتصفحات الحديثة. ستتم مطابقة اللغات المكونة مع رأس Accept-Language ثم إعادة التوجيه وفقًا للاستراتيجية المكونة.

تحسين محركات البحث

بما أن Next.js يعرف لغة الصفحة التي يزورها المستخدم، فإنه سيضيف تلقائيًا سمة lang إلى علامة <html>.

لا يعرف Next.js عن المتغيرات المختلفة للصفحة، لذا فإن إضافة علامات meta hreflang باستخدام next/head متروك لك. يمكنك معرفة المزيد عن hreflang في توثيق Google Webmasters.

مستقبل التدويل في Next.js

يمثل التوجيه الدولي الأول في سلسلة من الميزات التي ستجعل تدويل وتوطين مشروعك أسهل. يسمح التوجيه الدولي بالتكامل مع غالبية مكتبات تدويل React.

لمعرفة المزيد عن التوجيه الدولي، راجع توثيق التوجيه الدولي.

رؤى سرعة Next.js

في Vercel، نعلم أنك لا تستطيع إصلاح ما لا يمكنك قياسه.

أصبح زوارك أكثر حساسية لأداء الموقع. أكثر من 50% منهم سيتركون موقعك إذا استغرق تحميله أكثر من 3 ثوانٍ. إذا كنت تعمل في مجال التجارة الإلكترونية، وجد الكثيرون أن تحسين وقت التحميل بمقدار 1/10 من الثانية أدى إلى زيادة بنسبة 1% في التحويل.

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

مع رؤى سرعة Next.js:

بدلاً من القياس مرة واحدة، ستقوم الآن بالقياس بشكل مستمر.

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

تهدف رؤى سرعة Next.js إلى التركيز على الصورة الكاملة، وفهم جمهورك بعمق، وكيف يعمل تطبيقك لمستخدميك.

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

مؤشرات الويب الأساسية (Core Web Vitals)

تعاونت جوجل مع مجموعة عمل أداء الويب (Web Performance Working Group) لوضع مجموعة من المقاييس لقياس تجربة المستخدمين مع أداء موقعك بدقة: وتُعرف باسم مؤشرات الويب. هذه المؤشرات تقيس سرعة التحميل المُدركة، وسرعة الاستجابة، والاستقرار البصري لموقعك - وكلها عوامل حاسمة لصحة الموقع بشكل عام!

يمكن قياس سرعة التحميل المُدركة من خلال مقياس "أكبر عنصر مرئي (Largest Contentful Paint)" أو اللحظة التي يتم فيها عرض كل محتوى الصفحة. على سبيل المثال، عندما أفتح رابطًا لشراء حذاء رياضي - الوقت الذي يمر قبل أن أرى الحذاء وسعره وزر "أضف إلى السلة" هو مقياس LCP.

يمكن قياس سرعة استجابة الصفحة من خلال مقياس "تأخر أول إدخال (First Input Delay)" الذي يقيس المدة التي ينتظرها المستخدمون لرؤية رد فعل أول تفاعل لهم مع الصفحة. مثلاً، الوقت بين النقر على "أضف إلى السلة" وزيادة عدد العناصر في السلة هو مقياس FID.

أخيرًا، يمكن قياس الاستقرار البصري من خلال مقياس "إزاحة التخطيط التراكمية (Cumulative Layout Shift)" أو مقدار تحرك العناصر بعد عرضها للمستخدم. جميعنا مررنا بتجربة محبطة عند النقر على زر تحرك بسبب تحميل صورة متأخر - هذه هي إزاحة التخطيط.

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

لا يمكن للاختبار المُحاكي التقاط هذه الإشارات المهمة.

تتيح لك Next.js Speed Insights الحصول على رؤى من العالم الحقيقي بدلاً من المعايير الاصطناعية. توفر تدفقًا مستمرًا من القياسات بدلاً من الاعتماد على الاختبارات المتقطعة، مما يضمن أن تصبح جزءًا من سير عمل المطورين.

تتيح لك Next.js Speed Insights الحصول على رؤى من العالم الحقيقي، بدلاً من المعايير الاصطناعية. توفر تدفقًا مستمرًا من القياسات بدلاً من الاعتماد على الاختبارات المتقطعة، مما يضمن أن تصبح جزءًا من سير عمل المطورين.

زر nextjs.org/analytics لمعرفة كيفية تفعيلها في تطبيقك الآن.

Next.js Commerce

التجارة الإلكترونية هي أحد أهم استخدامات الويب. ميزات Next.js 10 الجديدة هي أدوات قوية جديدة للتجارة الإلكترونية.

لهذا السبب، بالتعاون مع BigCommerce، أطلقنا اليوم Next.js Commerce، مجموعة البداية الشاملة لمواقع التجارة الإلكترونية باستخدام React. بمجرد نقرات قليلة، يمكن لمطوري Next.js استنساخها ونشرها وتخصيصها بالكامل. ابدأ الآن على nextjs.org/commerce.

دعم React 17

لم يتضمن React 17 أي تغييرات تعارض Next.js، ولكن كانت هناك بعض التغييرات الصيانة المطلوبة، مثل تحديث تبعيات الأقران. تحويل JSX الجديد مفعل تلقائيًا عند استخدام React 17، ولا حاجة لتغييرات التكوين.

كل ما عليك فعله لبدء استخدام React 17 هو تحديث Next.js وReact:

npm install next@latest react@latest react-dom@latest

تحديث سريع لـ getStaticProps / getServerSideProps

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

لمعرفة المزيد عن getStaticProps و getServerSideProps، يمكنك قراءة توثيق جلب البيانات.

تحديث سريع لـ MDX

عند استخدام Next.js مع MDX عبر @next/mdx، سيستفيد الآن تغيير محتويات MDX من التحديث السريع، مما يضمن عدم الحاجة إلى إعادة تحميل الصفحة عند التعديلات.

يوجهك توثيق @next/mdx حول كيفية إعداد MDX مع Next.js.

استيراد CSS من مكونات React الخارجية

يمكنك الآن استيراد CSS من طرف ثالث داخل مكونات React. هذا يسمح بتقسيم كود CSS المخصص لمكون واحد فقط. على سبيل المثال، يمكنك الآن استخدام مكتبة react-datepicker دون الحاجة إلى استيراد CSS في _app.js:

import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
 
function MyComponent() {}

يمكنك الرجوع إلى توثيق دعم CSS المدمج لمعرفة المزيد حول كيفية تعامل Next.js مع استيراد CSS.

حل تلقائي لـ href

إذا كنت قد استخدمت مسارات ديناميكية من قبل، فمن المحتمل أنك واجهت حالة حيث كان عليك توفير كل من خاصية href و as لـ next/link. سيبدو شيء مثل هذا:

<Link href="/categories/[slug]" as="/categories/books" />

هذا سمح لـ Next.js باستبدال href للمعاملات الديناميكية، ولكنه تسبب في تعقيدات عندما ينسى المطورون إضافة as أو يضيفون as في href مما يؤدي إلى عدم استخدام توجيه الصفحات من جانب العميل.

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

يسعدنا الإعلان أنه كجزء من Next.js 10 لم تعد مضطرًا لاستخدام خاصية as لمعظم حالات الاستخدام. إزالة التعقيدات من المطورين وتحسين تجربة المستخدم النهائي.

هذا التغيير متوافق تمامًا مع الإصدارات السابقة، إذا كنت تستخدم حاليًا كل من href و as فإن السلوك الحالي محفوظ.

لتبني حل href التلقائي، كل ما عليك فعله هو تغيير استخدامك لـ next/link لاستخدام href فقط مع القيمة التي كانت لديك سابقًا في خاصية as.

<Link href="/categories/books" />

لمعرفة المزيد عن next/link وتوجيه جانب العميل، يمكنك الرجوع إلى توثيق next/link.

واجهة سطر الأوامر @next/codemod

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

عند إهمال ميزة في Next.js وتتطلب تغييرات كبيرة على قاعدة الكود، يقوم فريقنا بإنشاء codemod لها. Codemod هو تحويل كود آلي يمكنك تشغيله على مشروعك لتحديث الكود المصدري.

على سبيل المثال: أصدرنا codemod لتحديث دوال السهم والدوال المجهولة إلى دوال مسماة. هذا التحويل مطلوب لأنه بخلاف ذلك لن يتمكن React Fast Refresh من اكتشاف الدالة كمكون React صالح. وبالمثل، لن تلتقط قواعد eslint الخاصة بـ React hooks الدالة كمكون React.

مع Next.js 10، نطلق أداة سطر أوامر جديدة لـ Next.js codemods تتيح لك تشغيل أمر واحد لتحديث تطبيقك: npx @next/codemod <transform> <path>.

لمعرفة المزيد عن codemods، يمكنك الاطلاع على توثيق Next.js Codemods.

الاحتياطي الحاجز لـ getStaticPaths

في Next.js 9.3، قدمنا getStaticProps و getStaticPaths مع القدرة على إعادة خاصية fallback في getStaticPaths. تسمح خاصية fallback بإنشاء صفحات ثابتة إضافية دون الحاجة إلى إعادة بناء كاملة، حيث يتم تقديم ملف HTML ثابت في البداية ثم استبداله بالمحتوى المقدم بالكامل في الطلبات اللاحقة. في الأشهر القليلة الماضية، تلقينا الكثير من الملاحظات من الشركات التي أرادت سلوكًا مشابهًا ولكن مختلفًا قليلاً: تقديم مسبق حاجز عندما يطلب المستخدم الصفحة لأول مرة. بعد ذلك التقديم الأولي، سيتم إعادة استخدام الصفحة للطلبات اللاحقة.

مع Next.js 10، نحل هذه الحالة.

يسعدنا الإعلان عن الوضع الجديد fallback: 'blocking' لـ getStaticPaths الذي يمكن السلوك الحاجز حيث لا يتم إرسال احتياطي ثابت إلى المتصفح. بدلاً من ذلك، يتم الانتظار على الطلب الأولي للتقديم المسبق.

export function getStaticPaths() {
  return {
    // enables blocking mode for the fallback behavior
    fallback: 'blocking',
  };
}

لمعرفة المزيد عن سلوك fallback لإنشاء صفحات ثابتة إضافية تدريجيًا، يمكنك الرجوع إلى توثيق fallback.

دعم redirect و notFound لـ getStaticProps / getServerSideProps

منذ تقديم getStaticProps و getServerSideProps، لاحظنا حالات يحتاج فيها المستخدمون إلى إعادة توجيهات واستجابات 404. لمساعدة في تبسيط هذه الحالات، نسمح الآن بإعادة حقلين جديدين من getStaticProps و getServerSideProps: notFound و redirect.

دعم notFound

عند إعادة حقل notFound مع true، سيتم إرجاع صفحة 404 الافتراضية مع رمز حالة 404. هذا يسمح لك بتجنب إنشاء صفحات إضافية مع SSG والحاجة إلى التعامل مع عرض صفحة 404 يدويًا.

export function getStaticProps() {
  return {
    // returns the default 404 page with a status code of 404
    notFound: true,
  };
}

دعم redirect

يمكن الآن إعادة التوجيهات التي تحتوي على destination وما إذا كان التوجيه دائمًا أم لا، مثل permanent: true. يمكن أيضًا إعادة statusCode اختياريًا بدلاً من حقل permanent للحالات التي تحتاج فيها إلى استخدام حالة محددة بدلاً من الافتراضيات.

export function getStaticProps() {
  return {
    // returns a redirect to an internal page `/another-page`
    redirect: {
      destination: '/another-page',
      permanent: false,
    },
  };
}

export function getServerSideProps() {
  return {
    // returns a redirect to an external domain `example.com`
    redirect: {
      destination: 'https://example.com',
      permanent: false,
    },
  };
}

الختام

يسعدنا رؤية النمو المستمر في اعتماد Next.js:

• لدينا أكثر من 1,300 مساهم مستقل، مع أكثر من 120 مساهم جديد منذ إصدار 9.5
• على GitHub، حصل المشروع على أكثر من 54,800 نجمة.

انضم إلى مجتمع Next.js على مناقشات GitHub. المناقشات هي مساحة مجتمعية تتيح لك التواصل مع مستخدمي Next.js الآخرين وطرح الأسئلة بحرية أو مشاركة عملك.

الاعتمادات

نحن ممتنون لمجتمعنا، بما في ذلك جميع الملاحظات الخارجية والمساهمات التي ساعدت في تشكيل هذا الإصدار.

شارك في هذا الإصدار مساهمات من: @ijjk, @adebiyial, @elliottsj, @saintmalik, @HaNdTriX, @prateekbh, @amirsaeed671, @paambaati, @imagentleman, @gregrickaby, @Janpot, @atcastle, @Kirkhammetz, @remorses, @davidsonsns, @kmkzt, @slawekkolodziej, @Timer, @styfle, @timneutkens, @ykzts, @ashconnell, @orYoffe, @lfades, @justinwhall, @fbaiodias, @ludofischer, @felipeguilhermefs, @gr-qft, @TasukuUno, @YichiZ, @weichienhung, @seosmmbusiness, @HsuTing, @gsimone, @peduarte, @ztanner, @neighborhood999, @chibicode, @merceyz, @opudalo, @lunchboxav, @mohsen1, @akd-io, @justman00, @helloworld, @devknoll, @borekb, @ArthurMaverick, @sakito21, @TrySound, @omBratteng, @svenheden, @hallaji, @kettanaito, @vvo, @m-lautenbach, @jensmeindertsma, @Zeko369, @longlho, @stefanprobst, @laugharn, @sdornan, @daneroo, @mohd-akram, @austingmhuang, @sphilee, @devinekadeni, @Bacher, @nghiepit, @tomasdisk, @leader22, @paulogdm, @284km, @belgattitude, @geritol, @stigkj, @sampoder, @samrobbins85, @Pitasi, @digitalPlayer1125, @timfee, @plug-n-play, @philihp, @leerob, @dylanjha, @Kerumen, @rdimaio, @jorisw, @zerbinidamata, @jamesgeorge007, @Jashnm, و @futantan!