الإصدار 12.2 من Next.js | Next.js العربية

نحن نضع الأساس لمستقبل Next.js مع الإصدار 12.2:

Middleware (مستقر): توجيه ديناميكي لتطبيقك بالكامل.
ISR عند الطلب (مستقر): تحديث المحتوى دون الحاجة إلى إعادة النشر.
مسارات Edge API (تجريبي): نقاط نهاية API عالية الأداء.
Edge SSR (تجريبي): عرض التطبيق من جانب الخادم، على Edge.
إضافات SWC (تجريبي): توسيع عملية التجميع باستخدام إضافاتك الخاصة.
تحسينات على next/image: بما في ذلك مكون next/future/image الجديد.

قم بالتحديث اليوم عن طريق تشغيل npm i next@latest.

Middleware (مستقر)

يسعدنا الإعلان عن أن Middleware أصبح الآن مستقرًا في الإصدار 12.2 وتم تحسين واجهة برمجة التطبيقات (API) بناءً على ملاحظات المستخدمين.

يسمح لك Middleware بتشغيل التعليمات البرمجية قبل اكتمال الطلب. بناءً على الطلب الوارد، يمكنك تعديل الاستجابة عن طريق إعادة الكتابة، إعادة التوجيه، إضافة رؤوس، أو تعيين ملفات تعريف الارتباط.

middleware.ts

import { NextRequest, NextResponse } from 'next/server';
 
// إذا كان الطلب الوارد يحتوي على ملف تعريف الارتباط "beta"
// فسنقوم بإعادة كتابة الطلب إلى /beta
export function middleware(req: NextRequest) {
  const isInBeta = JSON.parse(req.cookies.get('beta') || 'false');
  req.nextUrl.pathname = isInBeta ? '/beta' : '/';
  return NextResponse.rewrite(req.nextUrl);
}
 
// يدعم قيمة واحدة أو مجموعة من المطابقات
export const config = {
  matcher: '/',
};

لتحديث أحدث تغييرات واجهة برمجة التطبيقات (API) لـ Middleware، يرجى الاطلاع على دليل الترحيل.

جرب Middleware مجانًا على Vercel أو عند الاستضافة الذاتية باستخدام next start.

يسمح لك ISR عند الطلب بتحديث المحتوى على موقعك دون الحاجة إلى إعادة النشر. هذا يسهل تحديث موقعك فورًا عند تغير البيانات في نظام إدارة المحتوى (CMS) أو منصة التجارة الإلكترونية. كانت هذه واحدة من أكثر الميزات المطلوبة من المجتمع ونحن متحمسون لأنها أصبحت الآن مستقرة.

pages/api/revalidate.js

export default async function handler(req, res) {
  // التحقق من السر للتأكد من أن هذا طلب صالح
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'رمز غير صالح' });
  }
 
  try {
    await res.revalidate('/path-to-revalidate');
    return res.json({ revalidated: true });
  } catch (err) {
    // في حالة وجود خطأ، سيستمر Next.js
    // في عرض آخر صفحة تم إنشاؤها بنجاح
    return res.status(500).send('خطأ في إعادة التحقق');
  }
}

يعمل ISR مع أي مزود يدعم واجهة برمجة تطبيقات بناء Next.js (next build). عند النشر على Vercel، يتم نشر إعادة التحقق عند الطلب عالميًا في حوالي 300 مللي ثانية عند دفع الصفحات إلى Edge.

لمزيد من المعلومات، تحقق من الوثائق أو شاهد العرض التوضيحي لرؤية إعادة التحقق عند الطلب في العمل.

مسارات Edge API (تجريبي)

يدعم Next.js الآن استخدام وقت تشغيل Edge لمسارات API. وقت تشغيل Edge هو وقت تشغيل أخف وزنًا من Node.js يوفر بدءًا سريعًا لزمن انتقال منخفض. بالإضافة إلى ذلك، تدعم مسارات Edge API تدفق الاستجابات من الخادم.

يمكنك تعيين وقت التشغيل لمسار API في config، مع تحديد إما nodejs (افتراضي) أو experimental-edge:

pages/api/hello.js

import type { NextRequest } from 'next/server';
 
export default (req: NextRequest) => {
  return new Response(`مرحبًا، من ${req.url} أنا الآن مسار Edge API!`);
};
 
export const config = {
  runtime: 'experimental-edge',
};

نظرًا لأن وقت تشغيل Edge خفيف الوزن، فإنه يحتوي على قيود لاستيعاب البدء السريع - على سبيل المثال، لا يدعم واجهات برمجة تطبيقات Node.js المحددة مثل fs. لذلك، يظل وقت التشغيل الافتراضي لمسارات API هو nodejs.

لمزيد من المعلومات، تحقق من الوثائق.

عرض جانب الخادم على Edge (تجريبي)

يدعم Next.js الآن استخدام وقت تشغيل Edge لعرض جانب الخادم.

كما ذكرنا سابقًا، وقت تشغيل Edge هو وقت تشغيل أخف وزنًا من Node.js يوفر بدءًا سريعًا لزمن انتقال منخفض. عند استخدامه مع React 18، فإنه يمكّن من تدفق عرض جانب الخادم للصفحات.

يستخدم Next.js Node.js كوقت تشغيل افتراضي لعرض الصفحات من جانب الخادم. بدءًا من الإصدار 12.2، إذا كنت تستخدم React 18، يمكنك اختيار استخدام وقت تشغيل Edge.

يمكنك تعيين وقت التشغيل عالميًا في next.config.js، مع تحديد إما nodejs أو experimental-edge:

next.config.js

module.exports = {
  experimental: {
    runtime: 'experimental-edge',
  },
};

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

pages/index.js

export const config = {
  runtime: 'nodejs',
};
 
export default function Home() {}

يمكنك اكتشاف وقت التشغيل الذي تستخدمه من خلال النظر إلى متغير البيئة process.env.NEXT_RUNTIME أثناء وقت التشغيل، وفحص متغير options.nextRuntime أثناء تجميع webpack.

لمزيد من المعلومات، تحقق من الوثائق.

تحسينات على `next/image`

مكون `next/future/image` (تجريبي)

لقد سمعنا ملاحظاتكم حول مكون الصورة الحالي ونحن متحمسون لمشاركة معاينة مبكرة لمكون next/image الجديد. هذا المكون الجديد والمحسن يتطلب جافا سكريبت أقل على جانب العميل ويبسط كيفية تنسيق الصور:

يعرض <img> واحدة بدون أغلفة <div> أو <span>
أضاف دعمًا لخاصية style الأساسية
أزال الخصائص layout و objectFit و objectPosition لصالح style أو className
أزال تنفيذ IntersectionObserver لصالح التحميل البطيء الأصلي
أزال تكوين loader لصالح خاصية loader
ملاحظة: لا يوجد وضع fill (بعد) لذا فإن خصائص width و height مطلوبة

هذا يحسن الأداء لأن loading="lazy" الأصلي لا يحتاج إلى انتظار تهيئة React وجافا سكريبت على جانب العميل.

لمزيد من المعلومات، تحقق من الوثائق.

أنماط عن بعد (تجريبي)

يدعم next/image الآن خيار تكوين تجريبي remotePatterns يسمح لك بتحديد أحرف البدل للصور البعيدة عند استخدام واجهة برمجة تطبيقات تحسين الصور المدمجة. هذا يسمح بمطابقة أكثر قوة من تكوين images.domains الحالي، الذي يقوم فقط بمطابقة دقيقة لاسم النطاق.

next.config.js

module.exports = {
  experimental: {
    images: {
      remotePatterns: [
        {
          // يجب أن ينتهي اسم مضيف خاصية `src` بـ `.example.com`،
          // وإلا فسيستجيب بـ 400 طلب غير صالح.
          protocol: 'https',
          hostname: '**.example.com',
        },
      ],
    },
  },
};

لمزيد من المعلومات، تحقق من الوثائق.

تعطيل تحسين الصور

يمنع واجهة برمجة تطبيقات تحسين الصور بدون تكوين (zero-config) استخدام next export لأنها تتطلب خادمًا لتحسين الصور عند الطلب عند الحاجة إليها. حتى اليوم، كان على المستخدمين الذين يستهدفون next export تكوين loader لاستخدام مزود تحسين صور تابع لجهة خارجية، ولكن لم يكن هناك حل واضح في حالة عدم توفر مزود. بدءًا من اليوم، يمكن لمستخدمي next export تعطيل تحسين الصور لجميع حالات next/image باستخدام خاصية تكوين جديدة:

next.config.js

module.exports = {
  experimental: {
    images: {
      unoptimized: true,
    },
  },
};

إضافات SWC (تجريبية)

يستخدم مترجم Next.js أداة SWC لتحويل وتصغير كود JavaScript الخاص بك للإنتاج. تم تقديم SWC في Next.js 12.0 لتحسين أداء التطوير المحلي والبناء.

يمكنك الآن إضافة إضافات (مكتوبة بلغة WebAssembly) لتخصيص سلوك تحويل SWC أثناء الترجمة:

next.config.js

module.exports = {
  experimental: {
    swcPlugins: [
      ['css-variable/swc', { displayName: true, basePath: __dirname }],
    ],
  },
};

لمزيد من المعلومات، اطلع على الوثائق.

تحسينات دعم React 18

تحسين دعم مكتبات CSS-in-JS مثل styled-components و emotion مع تجربة ترقية أكثر سلاسة وبدون تغييرات غير متوافقة.
دعم مناسب الآن لـ AMP وتحسينات HTML اللاحقة (تحسينات CSS والخطوط).
يدعم next/head الآن React 18.
مُعلن مسارات Next.js، الذي يُستخدم للإعلان عن انتقالات الصفحات لقارئات الشاشة وتقنيات المساعدة الأخرى، يدعم الآن React 18.

تحسينات أخرى

دعم تحويل Emotion في مترجم Next.js. معظم ميزات @emotion/babel-plugin مدعومة الآن، ويمكن إزالتها ما لم تكن تستخدم importMap. لمزيد من المعلومات، اطلع على الوثائق.
دعم أفضل لتحويل styled-components في مترجم Next.js من خلال السماح بتخصيص الخيارات الافتراضية، بما في ذلك خيار cssProp. لمزيد من المعلومات، اطلع على الوثائق.
دعم أفضل لوحدات JavaScript (ES Modules)، بحيث يمكن استيراد مكونات مثل next/image و next/link بشكل صحيح.
لم يعد next/link يتطلب إضافة <a> يدويًا كعنصر فرعي. يمكنك الآن الاختيار لهذا السلوك بطريقة متوافقة مع الإصدارات السابقة.
أضفنا دعمًا تجريبيًا لإرسال JavaScript الحديث فقط عن طريق تعديل browsersList. يمكنك الاختيار لهذا السلوك عن طريق تعيين browsersListForSwc: true و legacyBrowsers: false في خيار experimental في next.config.js.
تحسينات جديدة في @swc/helpers تمنع التكرار عبر الحزم، مما يقلل حجم الحزمة بحوالي 2KB في التكوين الأدنى، وأكثر في التطبيقات الأكبر.
قللنا بشكل كبير حجم تثبيت Next.js. قمنا بذلك عن طريق نقل مستودعنا الأحادي إلى pnpm، مما يسمح لنا بإزالة الحزم المكررة أثناء إنشاء الإصدارات المترجمة مسبقًا التي نستخدمها. يؤدي هذا إلى تقليل حجم التثبيت بمقدار 14MB.
في استمرار جهودنا لتحسين استضافة Next.js ذاتيًا، نقوم بتثبيت تكويننا التجريبي outputStandalone: true إلى output: 'standalone'. يقلل هذا التكوين أحجام النشر بشكل كبير عن طريق تضمين الملفات/الأصول الضرورية فقط، بما في ذلك إزالة الحاجة إلى تثبيت كل node_modules في حزمة النشر المبنية. يمكن رؤية هذا التكوين في العمل في مثال with-docker الخاص بنا.

وثيقة طلب التعليقات (RFC) للتخطيطات ودعم التوجيه المتقدم

في حال فاتك، أعلنا الشهر الماضي عن وثيقة طلب التعليقات (RFC) للتخطيطات - أكبر تحديث لـ Next.js منذ تقديمه في 2016 بما في ذلك:

التخطيطات المتداخلة: بناء تطبيقات معقدة بمسارات متداخلة.
مصمم لمكونات الخادم: مُحسّن لتنقل الشجرة الفرعية.
تحسين جلب البيانات: جلب البيانات في التخطيطات مع تجنب الشلالات.
استخدام ميزات React 18: البث (Streaming)، التحولات (Transitions)، و Suspense.
التوجيه من جانب الخادم والعميل: توجيه مركزي للخادم مع سلوك يشبه التطبيقات ذات الصفحة الواحدة (SPA-like).
قابلية التبني بنسبة 100% تدريجيًا: لا توجد تغييرات غير متوافقة حتى تتمكن من التبني تدريجيًا.
اتفاقيات التوجيه المتقدمة: التخزين خارج الشاشة، التحولات الفورية، والمزيد.

لمزيد من المعلومات، اطلع على وثيقة طلب التعليقات (RFC) أو قدم ملاحظاتك.

شكرًا للمساهمين

Next.js هو نتيجة العمل المشترك لأكثر من 2000 مطور فردي، وشركاء صناعيين مثل Google Chrome وMeta، وفريقنا الأساسي في Vercel.

ساهم في هذا الإصدار: @huozhi, @ijjk, @kwonoj, @ViolanteCodes, @akrabdev, @timneutkens, @jpveilleux, @stigkj, @jgoping, @oof2win2, @Brooooooklyn, @CGamesPlay, @lfades, @molebox, @steven-tey, @SukkaW, @Kikobeats, @balazsorban44, @erikbrinkman, @therealmarzouq, @remcohaszing, @perkinsjr, @shuding, @hanneslund, @housseindjirdeh, @RobertKeyser, @styfle, @htunnicliff, @lukeshumard, @sagnik3, @pixelass, @JoshuaKGoldberg, @rishabhpoddar, @nguyenyou, @kdy1, @sidwebworks, @gnoff, @gaspar09, @feugy, @mfix-stripe, @javivelasco, @Chastrlove, @goncharov-vlad, @NaveenDA, @Firfi, @idkwhojamesis, @FLCN-16, @icyJoseph, @ElijahPepe, @elskwid, @irvile, @Munawwar, @ykolbin, @hulufei, @baruchadi, @imadatyatalah, @await-ovo, @menosprezzi, @gazs, @Exortions, @rubens-lopes, @woochul2, @stefee, @stmtk1, @jlarmstrongiv, @MaedahBatool, @jameshfisher, @fabienheureux, @TxHawks, @mattbrandlysonos, @iggyzap, @src200, @AkifumiSato, @hermanskurichin, @kamilogorek, @ben-xD, @dawsonbooth, @Josehower, @crutchcorn, @ericmatthys, @CharlesStover, @charlypoly, @apmatthews, @naingaungphyo, @alexandrutasica, @stefanprobst, @dc7290, @DilwoarH, @tommarshall, @stanhong, @leerob, @appsbytom, @sshyam-gupta, @saulloalmeida, @indicozy, @ArianHamdi, @Clariity, @sebastianbenz, @7iomka, @gr-qft, @Schniz, @dgagn, @sokra, @okbel, @tbvjaos510, @dmvjs, @PepijnSenders, @JohnPhamous, @kyliau, @eric-burel, @alabhyajindal, @jsjoeio, @vorcigernix, @clearlyTHUYDOAN, @splatterxl, @manovotny, @maxproske, @nvh95, @frankievalentine, @nuta, @bagpyp, @dfelsie, @qqpann, @atcastle, @jsimonrichard, @mass2527, @ekamkohli, @Yuddomack, @tonyspiro, @saurabhmehta1601, @banner4422, @falsepopsky, @jantimon, @henriqueholtz, @ilfa, @matteobruni, @ryscheng, @hoonoh, @ForsakenHarmony, @william-keller, @AleksaC, @Miikis, @zakiego, @radunemerenco, @AliYusuf95, و @dominiksipowicz.