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

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

• التحديث السريع (Fast Refresh): تجربة تحرير مباشر سريعة وموثوقة، كما تم إثباته على نطاق فيسبوك
• التجديد الثابت التدريجي (Incremental Static Regeneration) (بيتا): إعادة بناء الصفحات الثابتة بعد النشر، في غضون أجزاء من الثانية
• أمثلة أنظمة إدارة المحتوى (CMS Examples): أمثلة لأنظمة Contentful، DatoCMS، Prismic، Sanity، و TakeShape باستخدام ميزة توليد المواقع الثابتة من الجيل التالي
• دعم جديد لمتغيرات البيئة (New Environment Variables Support): دعم مدمج لملفات .env وبادئة NEXT_PUBLIC_، كما هو موجود في CRA
• تحسين دعم Fetch المدمج (Improved Built-in Fetch Support): تخلص من استيرادات node-fetch و isomorphic-fetch لصالح polyfill مدمج لـ fetch، لبيئة Node.js وجميع المتصفحات (أثناء البناء والتنفيذ)
• تقارير Web Vitals المدمجة (Integrated Web Vitals Reporting): احصل على المقاييس التي تحدد درجات Lighthouse، ولكن من حركة المرور الحقيقية لموقعك
• استيرادات مطلقة وأسماء مستعارة (Absolute Imports and Aliases): استيرادات أوضح وأقصر، وتجنب الفوضى الناتجة عن ../../../
• دعم Sass قابل للتخصيص (Configurable Sass Support): قم بتكوين includePaths وخيارات أخرى في دعم Sass المدمج
• تحسين ناتج السجلات (Improved Log Output): ناتج وحدة التحكم أصبح أسهل للقراءة، متسق التنسيق، وأقل تكرارًا

التحديث السريع (Fast Refresh)

التحديث السريع هو تجربة جديدة لإعادة التحميل السريع تمنحك ملاحظات فورية على التعديلات التي تجريها على مكونات React. وهي الآن مفعّلة افتراضيًا لجميع المشاريع على Next.js 9.4 أو أحدث.

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

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

يتكامل التحديث السريع بعمق مع React نفسه (عبر React Refresh)، مما يسمح لـ Next.js بإجراء تحديثات دقيقة متوقعة لشجرة مكونات React الخاصة بك.

هذا يعني أن Next.js سيحدّث فقط الكود في الملف الذي قمت بتحريره، ويعيد عرض ذلك المكون فقط، دون فقدان حالة المكون. وهذا يشمل الأنماط (ضمن السطر، أو CSS-in-JS، أو وحدات CSS/Sass)، وعلامات الترميز، ومعالجات الأحداث، والتأثيرات (عبر useEffect).

جلسة تحرير تعرض أخطاء مترجم وتنفيذ (مع استعادة سريعة)، وتعديلات تحافظ على الحالة.

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

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

نود أن نشكر Dan Abramov على مساهماته القيمة ومساعدته في تنفيذ هذه الميزة.

التجديد الثابت التدريجي (Incremental Static Regeneration) (بيتا)

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

للحصول على أفضل ما في العالمين، يدعم Next.js التوليد الثابت التدريجي، الذي يقوم بتحديث المحتوى الثابت بعد أن قمت بالفعل ببناء موقعك. على سبيل المثال، في الإصدار 9.3 قدمنا خيار fallback: true في getStaticPaths، الذي يسمح لك بإضافة صفحات جديدة أثناء التنفيذ.

قمنا مؤخرًا بتجميع مثال يوضح كيف يمكن لـ Next.js أن يقوم بتصيير مسبقًا لعدد لا نهائي من الصفحات بهذه الطريقة.

اليوم، نقدم أيضًا التجديد الثابت التدريجي (بيتا)، وهي آلية لتحديث الصفحات الموجودة، عن طريق إعادة تصييرها في الخلفية مع وصول الزيارات. مستوحاة من stale-while-revalidate، تضمن هذه الميزة تقديم الزيارات دون انقطاع، دائمًا بشكل ثابت، ويتم نشر الصفحة المُعاد بناؤها فقط بعد اكتمال توليدها.

export async function getStaticProps() {
  return {
    props: await getDataFromCMS(),
    // سنحاول إعادة توليد الصفحة:
    // - عند وصول طلب
    // - على الأكثر مرة كل ثانية
    unstable_revalidate: 1,
  };
}

على عكس SSR، يضمن التجديد الثابت التدريجي أن تحتفظ بفوائد الثبات:

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

كلتا الميزتين التدريجيتين (إضافة الصفحات وتحديثها بشكل كسول)، بالإضافة إلى وضع المعاينة، مدعومتان بالكامل بواسطة كل من next start ومنصة Vercel edge مباشرة.

في المستقبل، سنعمل على RFC تكميلي لمعالجة قدرتين إضافيتين للتوليد الثابت التدريجي:

• إعادة توليد وإبطال عدة صفحات في وقت واحد (مثل فهرس المدونة ومنشور مدونة معين)
• إعادة التوليد عن طريق الاستماع إلى الأحداث (مثل webhooks من نظام إدارة المحتوى)، قبل وصول زيارات المستخدمين

أمثلة أنظمة إدارة المحتوى (CMS Examples)

عقب إعلاننا عن توليد المواقع الثابتة من الجيل التالي، أردنا مشاركة سيناريوهات واقعية لجلب المحتوى من واجهات برمجة تطبيقات أنظمة إدارة المحتوى بدون واجهة رئيسية (Headless CMS) وعرضها كـ HTML في Next.js.

لقد تعاونّا مع مبتكري بعض من أفضل أنظمة إدارة المحتوى في العالم: Contentful، DatoCMS، Prismic، Sanity، و TakeShape، مع المزيد قادم.

هذه الأمثلة ليست جاهزة للاستخدام فحسب، بل هي أيضًا مفتوحة المصدر 100% ومرخصة تحت رخصة MIT، كما أنها تتضمن أفضل الممارسات المتاحة:

يحقق DatoCMS نتائج لا تشوبها شائبة بسبب دعمه المدمج لتحسين الصور.

يحقق DatoCMS نتائج لا تشوبها شائبة بسبب دعمه المدمج لتحسين الصور

لقد تعاونّا أيضًا مع TinaCMS على اتجاه جديد مثير لأنظمة إدارة المحتوى: تحرير المحتوى داخل الصفحة. اطلع على دليلهم لتعرف كيفية تنفيذه لمشروعك.

دعم جديد لمتغيرات البيئة (New Environment Variables Support)

إحدى الملاحظات الشائعة التي تلقيناها من الشركات التي تستخدم Next.js هي أنه لم يكن واضحًا متى يكون متغير البيئة مضمنًا في حزمة المتصفح ومتى يكون متاحًا فقط في بيئة Node.js.

اليوم نعلن عن ميزتين متوافقتين مع الإصدارات السابقة بالكامل ستساعدان في تبسيط هذه العملية.

أولاً، يمكنك الآن إضافة البادئة NEXT_PUBLIC_ إلى متغير البيئة لجعله متاحًا للمتصفح. عند استخدام هذا متغير البيئة، سيتم تضمينه في حزمة JavaScript الخاصة بالمتصفح.

لم تعد بحاجة إلى إضافة next.config.js وإضافة مفتاح env لجعل هذه المتغيرات متاحة.

// سيتم جعل متغير البيئة متاحًا للمتصفح
console.log('إصدار التطبيق الخاص بي', process.env.NEXT_PUBLIC_VERSION);
 
export default function HomePage() {
  return <h1>مرحبًا بالعالم</h1>;
}

التغيير الثاني هو أن Next.js يدعم الآن تحميل ملفات .env افتراضيًا. مما يسمح لك بتحديد متغيرات بيئة التطوير والإنتاج بسهولة.

يمكنك قراءة المزيد عن تحميل .env في توثيق متغيرات البيئة.

ستبسط هذه الميزات الجديدة استخدام متغيرات البيئة باتباع هذه الاتفاقيات:

• متغيرات البيئة متاحة فقط في بيئة Node.js افتراضيًا
• متغيرات البيئة التي تبدأ بـ NEXT_PUBLIC_ متاحة للمتصفح

تحسين دعم Fetch المدمج (Improved Built-in Fetch Support)

في Next.js 9.1.7 أعلنا عن تضمين polyfill لواجهة برمجة التطبيقات fetch() في المتصفح. اليوم تم توسيع هذا التضمين ليشمل بيئة Node.js أيضًا.

عمليًا، لم تعد بحاجة إلى استخدام أي نوع من polyfill لـ fetch على جانب الخادم (مثل isomorphic-unfetch أو node-fetch) حيث أن Next.js سيوفر fetch() تلقائيًا في جميع البيئات.

على سبيل المثال، عند استخدام getStaticProps، الذي يتم تنفيذه باستخدام Next.js أثناء وقت البناء:

export async function getStaticProps() {
  // لم يعد هناك حاجة لاستيراد fetch من isomorphic-unfetch
  const res = await fetch('https://.../posts');
  const posts = await res.json();
 
  return {
    props: {
      posts,
    },
  };
}
 
function Blog({ posts }) {
  // عرض المنشورات...
}
 
export default Blog;

تقارير Web Vitals المدمجة (Integrated Web Vitals Reporting)

الأسبوع الماضي، قدم فريق Google Chrome Core Web Vitals. Core Web Vitals هي إشارات الجودة الأساسية لتقديم تجربة مستخدم رائعة على الويب، والتي تُبنى عليها تقارير Lighthouse الشهيرة.

تتبع هذه المقاييس مفيد للغاية إذا كنت تريد أن يكون موقعك أو تطبيق الويب الخاص بك سريعًا قدر الإمكان، وهو أحد الأهداف الأساسية لـ Next.js.

أصدر فريق Chrome إضافة Core Web Vitals لـ Chrome التي تتيح لك كمطور الحصول على ملاحظات بصرية حول أداء صفحاتك.

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

لتسهيل إرسال تقارير Core Web Vitals إلى خدمة التحليلات الخاصة بك، قدمنا، بالتعاون مع Google، طريقة جديدة تسمى reportWebVitals يمكن تصديرها من pages/_app.js:

// سيتم استدعاؤها مرة لكل مقياس يجب الإبلاغ عنه.
export function reportWebVitals(metric) {
  // يمكن إرسال هذه المقاييس إلى أي خدمة تحليلات
  console.log(metric);
}
 
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
 
export default MyApp;

لاستخدام هذه الطريقة بالاشتراك مع خدمة التحليلات الخاصة بك، راجع قسم "إرسال النتائج إلى التحليلات" في الوثائق. إذا كنت تريد معرفة المزيد عن Core Web Vitals، يمكنك الرجوع إلى web.dev/vitals.

استيرادات مطلقة وأسماء مستعارة (Absolute Imports and Aliases)

إذا كنت تعمل على مشروع كبير، قد تعاني بعض عبارات import الخاصة بك من فوضى ../../../:

import Button from '../../../../components/button';

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

import Button from 'components/button';

نحن متحمسون للإعلان عن أن Next.js 9.4 يجعل إعداد الاستيرادات المطلقة بسيطًا للغاية لكل من مشاريع JavaScript و TypeScript. كل ما تحتاجه هو إضافة تكوين baseUrl إلى jsconfig.json (لمشاريع JS) أو tsconfig.json (لمشاريع TS).

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

هذا سيسمح بالاستيرادات المطلقة من . (الدليل الجذر). كما أنه يتكامل مع VSCode والمحررات الأخرى، مما يدعم التنقل في الكود وميزات المحرر الأخرى.

ملاحظة: إذا كنت قد عدلت سابقًا تكوين اسم مستعار لوحدة Webpack لتمكين الاستيرادات المطلقة، يمكن الآن إزالة هذا التكوين.

علاوة على ذلك، يدعم Next.js 9.4 أيضًا خيار paths، الذي يسمح لك بإنشاء أسماء مستعارة مخصصة للوحدات. على سبيل المثال، ما يلي يسمح لك باستخدام @/design-system بدلاً من components/design-system:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/design-system/*": ["components/design-system/*"]
    }
  }
}

يمكنك بعد ذلك استخدام الاسم المستعار الخاص بك كما يلي:

// تستورد 'components/design-system/button'
import Button from '@/design-system/button';

يجب عليك تحديد baseUrl إذا قمت بتحديد paths. يمكنك معرفة المزيد عن خيار paths في توثيق TypeScript.

دعم Sass قابل للتخصيص (Configurable Sass Support)

عند إطلاق دعم Sass المدمج في Next.js 9.3، تلقينا ملاحظات من مجموعة فرعية من المستخدمين الذين يرغبون في تكوين مترجم Sass. على سبيل المثال لتكوين includePaths.

أصبح هذا ممكنًا الآن باستخدام مفتاح sassOptions في next.config.js:

const path = require('path');
 
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
};

تحسين ناتج السجلات (Improved Log Output)

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

تشغيل next dev على الإصدارات قبل 9.4

تشغيل next dev على الإصدار 9.4

المجتمع (Community)

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

• لدينا أكثر من 1066 مساهم مستقل.
• على GitHub، حصل المشروع على أكثر من 48,000 نجمة.

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

إذا كنت تستخدم Next.js، فلا تتردد في مشاركة رابط مشروعك مع المجتمع.

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