Backالعودة إلى المدونة

Next.js 8.0.4

تقدّم Next.js 8.0.4 تحسينات في أداء البناء، حزم أصغر حجمًا، إعدادات افتراضية أقوى، والمزيد.

يسعدنا تقديم Next.js 8.0.4 جاهزًا للإنتاج:

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

Terminal
npm i next@latest react@latest react-dom@latest

أداء البناء

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

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

أظهرت قياساتنا أن جزءًا كبيرًا من وقت البناء يُستهلك في تصغير ملفات JavaScript، وبما أن ناتج البناء أصبح أكثر حتمية الآن، فإن فرص وجود الملف المصغر بالفعل في الذاكرة المؤقتة أصبحت أكبر.

سيتمكن المستخدمون الذين ينشرون على Vercel من تجربة هذه التحسينات في التخزين المؤقت تلقائيًا.

لقد قمنا بتبسيط ملف next/dynamic الخاص بالخادم ليشمل فقط الوحدات التي يتم تحميلها بشكل غير متزامن. هذا الملف المبسط أسرع في الحساب وينتج كود JavaScript أقل.

يجب أن يلاحظ مستخدمو CircleCI أوقات بناء أسرع. سابقًا، كان يتم تخصيص عمال أكثر من اللازم بسبب عدم انعكاس بيئة CircleCI بدقة لعدد وحدات المعالجة المركزية المتاحة. الآن يكتشف Next.js بيئة CircleCI ويحدد عددًا مناسبًا من وحدات المعالجة المركزية بناءً على الموارد المتاحة.

بصمة وقت تشغيل أصغر

يولد Next.js الآن أقل بـ 5.58 كيلوبايت من JavaScript على جانب العميل ولديه حمل HTTP أصغر من الإصدار السابق.

لم يعد withRouter يعتمد على hoist-non-react-statics، مما يقلل حجم الحزمة بمقدار 3 كيلوبايت. سيظل withRouter يرفع getInitialProps، لكن ليس الخصائص الثابتة الأخرى.

تم تحسين الإعداد المسبق next/babel لإنتاج JavaScript أخف و_أسرع_.

تمت إزالة رأس X-Powered-By، مما قلل من حجم حمل HTTP. بعد استطلاع المجتمع، وجدنا أن هذا الرأس كان معطلاً غالبًا في الإنتاج، لذا قررنا إزالته. هذا يعني أيضًا أنه يمكن إزالة poweredByHeader من ملف next.config.js إذا كان هذا الخيار مفعلًا في مشروعك.

قمنا بالعديد من التحسينات في شجرة تبعيات Next.js وقاعدة الكود بشكل عام، وبهذا تمكنا من جعل كل دالة سيرفرلس أصغر بـ 44 كيلوبايت (5.44 كيلوبايت مضغوطة).

يؤثر حجم دوال السيرفرلس مباشرة على أداء بدء التشغيل، الدوال الأصغر تعني بدء تشغيل أسرع.

8.08.0.4الفرق
حجم صفحة السيرفرلس259 كيلوبايت215 كيلوبايت17% أصغر
حجم صفحة السيرفرلس (مضغوط)62.3 كيلوبايت56.8 كيلوبايت9% أصغر

بعد إصدار Next.js 8، تلقينا تقارير من عدد قليل من المستخدمين يواجهون صعوبة في استيراد مكونات React خارج Next.js، على سبيل المثال في مجموعة الاختبارات الخاصة بهم. كان هذا بسبب إعادة توجيه الاستيرادات من next إلى الملف الصحيح داخل قاعدة كود Next.js، ومع ذلك، تم تطبيق هذا التحسين لجميع مستخدمي الإعداد المسبق next/babel. تم نقل التحسين إلى عملية بناء Next.js نفسها حتى لا يتعارض مع إعدادات babel للمستخدمين.

وسم viewport الافتراضي

أحد أهداف Next.js هو توفير أفضل الإعدادات الافتراضية لكتابة تطبيقات الويب. في إطار الجهود لتقليل مقدار الإعداد المطلوب عند تنفيذ استعلامات CSS media في Next.js.

بشكل افتراضي، لا تتعامل المتصفحات مع استعلامات CSS @media والتكبير/التصغير بالطريقة المتوقعة، مما قد يؤدي إلى تناقضات غير متوقعة عند كتابة استعلامات CSS @media.

في معظم الحالات، كان مستخدمو Next.js يضيفون وسم viewport إلى تطبيقهم لحل هذه التناقضات.

بدءًا من الإصدار 8.0.4، لم يعد هذا الوسم مطلوبًا في معظم الحالات. إذا لم يتم تعيين viewport بواسطة التطبيق، سيتم تطبيق viewport افتراضي:

<meta
  name="viewport"
  content="width=device-width,minimum-scale=1,initial-scale=1"
/>

لا يزال يمكن تجاوز وسم viewport باستخدام next/head:

pages/index.js
import Head from 'next/head';
 
function HomePage() {
  return (
    <>
      <Head>
        <meta
          name="viewport"
          content="width=device-width,minimum-scale=0.5,initial-scale=1"
        />
      </Head>
    </>
  );
}
 
export default HomePage;

نشكر جيسون ميلر على التعاون في تنفيذ هذا التغيير.

إضافة جديدة: إضافة @next/mdx

MDX تتيح لك كتابة JSX داخل مستندات Markdown الخاصة بك. يمكنك استخدام صيغة Markdown العادية لكتابة المحتوى واستيراد مكونات React لتعزيز المستند بمحتوى تفاعلي وديناميكي.

تم نقل الإضافة التي توفر دعم MDX لـ Next.js، @zeit/next-mdx، إلى مستودع Next.js على GitHub وهي متاحة الآن باسم @next/mdx.

التثبيت:

Terminal
npm i @next/mdx @mdx-js/loader

لجعلها متاحة لتطبيق Next.js الخاص بك، أنشئ ملف next.config.js وأدرج:

const withMDX = require('@next/mdx')();
module.exports = withMDX();

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

تحسينات في دليل التعلم

Next.js Learn هو دليل تعليمي خطوة بخطوة لتعلم Next.js، مزود باختبارات قصيرة وأمثلة.

تم إعادة بناء الموقع مؤخرًا باستخدام MDX، مما يجعل المساهمة أسهل من أي وقت مضى. نرحب بأي شخص للمساهمة في موقع التعلم!

تم أيضًا ترقية الموقع لاستخدام هدف السيرفرلس في Next.js، الذي تم تقديمه في Next.js 8، مما يضمن توسع الموقع وسرعته للمستخدمين في جميع أنحاء العالم.

تلقينا الكثير من الملاحظات من المجتمع حول تحسينات المحتوى، وقد كنا نعمل عليها خلال الأسابيع الماضية. يحتوي Next.js Learn الآن على أمثلة محدثة ومزيد من التفاصيل في كل قسم لجعل التعليمات أسهل في الفهم!

موقع Next.js Learn

موقع Next.js Learn

المساهمات

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

  • لدينا أكثر من 660 مساهمًا.
  • على GitHub، حصل المشروع على أكثر من 36,150 نجمًا.
  • تم تقديم أكثر من 2,950 طلب سحب منذ الإصدار الأول.

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

إذا كنت تبحث عن البدء في المساهمة في Next.js، فإن القضايا ذات العلامة good first issue أو help wanted هي مكان جيد للبدء.

المجتمع

نما مجتمع Next.js إلى أكثر من 6,000 عضو.

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

انضم إلى المجتمع على GitHub!