Next.js 5.1: تحسينات في تحميل الصفحات، إعدادات البيئة والمزيد

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

تم تقديم تحسينات كبيرة في الأداء: أصبح تحميل الصفحات أسرع بـ 102 مرة، كما تم تحسين تحميل صفحات الأخطاء.

للترقية أو التثبيت، قم بتنفيذ:

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

بالإضافة إلى ترقية Next.js، نقوم بترقية التبعيات react و react-dom

تأكد من ترقية إضافات next-plugins مثل @zeit/next-css، @zeit/next-sass، @zeit/next-less أو @zeit/next-typescript أيضًا.

تحميل أسرع للصفحات

بفضل التغييرات المعمارية في Next.js 5.0، تمكنا من تبسيط المنطق الذي يحمل الصفحات بناءً على مسار الرابط. هذه التغييرات كانت بناءً على بحث من @oliviertassinari. سابقًا كان تحميل الصفحة يستغرق في المتوسط 2.347 مللي ثانية. مع المنطق الجديد أصبح تحميل نفس الصفحة يستغرق في المتوسط 0.023 مللي ثانية. هذا يعني تحسنًا في السرعة بمقدار 102 مرة لواحدة من أكثر الطرق استخدامًا في تطبيقات Next.js.

مقارنة تحميل الصفحات بين Next.js 5.0 (اليسار) و Next.js 5.1 (اليمين)

إعدادات البيئة

تعتمد بيئات Node.js النموذجية عادةً على تمرير متغيرات البيئة للتطبيق، مثل: API_URL=https://api.vercel.com node index.js ثم يمكنك استخدام API_URL في أي مكان في تطبيقك عبر process.env.API_URL.

مع العرض الشامل (universal rendering) فإن process.env غير متاح على جانب العميل. لذا مع Next.js 5.1 نقدم ميزة جديدة: publicRuntimeConfig و serverRuntimeConfig. يمكن تعيين هذه في ملف next.config.js ثم ستكون متاحة عبر وحدة next/config.

module.exports = {
  serverRuntimeConfig: {
    // سيكون متاحًا فقط على جانب الخادم
    mySecret: 'secret',
  },
  publicRuntimeConfig: {
    // سيكون متاحًا على كل من الخادم والعميل
    staticFolder: '/static',
  },
};

يتم تعريف كل من serverRuntimeConfig و publicRuntimeConfig في next.config.js

import getConfig from 'next/config';
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
 
console.log(serverRuntimeConfig.mySecret); // سيكون متاحًا فقط على جانب الخادم
console.log(publicRuntimeConfig.staticFolder); // سيكون متاحًا على كل من الخادم والعميل
 
export default function Index() {
  return (
    <div>
      <img src={`${publicRuntimeConfig.staticFolder}/logo.png`} />
    </div>
  );
}

يتم استخدام دالة getConfig من وحدة next/config للحصول على قيم الإعدادات

تحسين معالجة الأخطاء

سابقًا كان لدى Next.js آلية خاصة للتعامل مع الأخطاء للكشف عن أخطاء الخادم عند تحميل حزم الصفحات. حزمة الصفحة هي ملف JavaScript الذي يتم تحميله على جانب العميل لتحميل الصفحة، مثل /_next/-/page/index.js.

إذا كان هناك خطأ، مثل عدم تطابق معرّف البناء، فإن حزمة الصفحة ستظل تُرسل مع حالة HTTP 200، ولكن المحتوى سيكون تمثيل JSON لخطأ تم إنشاؤه بواسطة خادم Next.js. السبب في ذلك هو وجود معالجة للأخطاء على جانب العميل تعتمد على أكثر من مجرد كون الصفحة 404. هذا الحل عمل بشكل جيد جدًا، حتى تحاول تحميل الأصول على مضيف ملفات ثابت أو CDN لا يدعم الاسترجاع.

مع Next.js 5.1 قمنا بإعادة هيكلة كاملة لمنطق معالجة الأخطاء، عندما تعيد حزمة الصفحة حالة HTTP 404 سيكتشف الموجه (router) ذلك تلقائيًا ويعيد تحميل الصفحة، للتأكد من إمكانية التنقل بين المناطق المتعددة.

في إعادة كتابة هذا المنطق، قمنا بإزالة خطاف Router.onAppUpdated؛ الذي كان يستخدم بشكل أساسي لإعادة تحميل الصفحة. الآن سيتم إعادة تحميل الصفحة تلقائيًا.

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

المراحل / دالة الإعداد

بعض إضافات next-plugins مثل @zeit/next-css مطلوبة فقط عندما يكون Next.js في وضع التطوير أو عند تشغيل next build.

يمكنك الآن تصدير دالة تُرجع كائن الإعدادات بدلاً من تصدير الكائن مباشرة.

module.exports = (phase, { defaultConfig }) => config;

ملف next.config.js الذي يُصدِر دالة تُرجع إعدادات المستخدم

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

لقد قدمنا وحدة جديدة تسمى next/constants تحتوي على ثوابت مستخدمة بشكل شائع، بما في ذلك المراحل.

const {PHASE_DEVELOPMENT_SERVER} = require('next/constants')
module.exports = (phase, {defaultConfig}){
  if(phase === PHASE_DEVELOPMENT_SERVER) {
    return { /* خيارات الإعداد الخاصة بوضع التطوير هنا */ }
  }
 
  return { /* خيارات الإعداد لجميع المراحل ما عدا التطوير هنا */ }
}

مثال لملف next.config.js يتحقق من مرحلة التطوير

تحسين إنشاء خرائط المصدر للإنتاج

مع تقديم webpack الشامل في Next.js 5 أصبح إضافة خرائط المصدر لبيئة الإنتاج بسيطًا مثل إضافة بضعة أسطر إلى next.config.js:

module.exports = {
  webpack(config, { dev }) {
    if (!dev) {
      config.devtool = 'source-map';
      for (const plugin of config.plugins) {
        if (plugin['constructor']['name'] === 'UglifyJsPlugin') {
          plugin.options.sourceMap = true;
          break;
        }
      }
    }
    return config;
  },
};

تمكين خرائط المصدر يدويًا في next.config.js

يمكن إضافة @zeit/next-source-maps للمشروع لتمكين خرائط المصدر للإنتاج تلقائيًا، أضف ما يلي إلى next.config.js:

const withSourceMaps = require('@zeit/next-source-maps');
module.exports = withSourceMaps();

استخدام @zeit/next-source-maps لتمكين خرائط المصدر في next.config.js

هذا مكّن إخراج خرائط المصدر لجميع الملفات ما عدا ملف واحد، app.js، والسبب في ذلك أن app.js كان يتكون من ملفات متعددة (manifest.js و commons.js) مجتمعة مع إضافة webpack. كان أحد الآثار الجانبية لهذا أن webpack لا يمكنه إنشاء خرائط مصدر للملف المجمع.

بفضل طلب سحب من @ptomasroos تم استبدال ملف app.js بملف main.js. هذا الملف سيحتوي على الكود الذي كان مُجمّعًا سابقًا في manifest.js و commons.js وسيقوم webpack بإنشاء خريطة مصدر لـ main.js. سيتم تقديم خرائط المصدر تلقائيًا، مما يسمح لأدوات تتبع الأخطاء الخارجية بعرض الملف الفعلي ورقم السطر عند اكتشاف الأخطاء.

عرض الكود المصدري في لوحة المصادر

إضافات جديدة / تحسينات على الإضافات الحالية

لقد قدمنا إضافتين رسميتين جديدتين. @zeit/next-bundle-analyzer يسمح بإعداد webpack-bundle-analyzer بسهولة لتحليل حزم الخادم والعميل بشكل منفصل.

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

المجتمع

يمكنك الآن العثور على مجتمع Next.js على GitHub. تم نشر قائمة بشركات بارزة تستخدم Next.js هناك مؤخرًا. لا تتردد في نشر المشاريع في الموضوع.

شكرًا

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

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

شكر خاص لـ Trulia على ملاحظاتهم القيمة المتعلقة بإعدادات البيئة ومعالجة صفحات الأخطاء الجديدة.