Next.js 15 | Next.js العربية

Next.js 15 أصبح الآن رسميًا مستقرًا وجاهزًا للإنتاج. هذا الإصدار يعتمد على التحديثات من كل من الإصدار المرشح 1 (RC1) والإصدار المرشح 2 (RC2). ركزنا بشدة على الاستقرار مع إضافة بعض التحديثات المثيرة التي نعتقد أنك ستحبها. جرب Next.js 15 اليوم:

terminal

# استخدم أداة سطر الأوامر التلقائية للترقية
npx @next/codemod@canary upgrade latest
 
# ... أو قم بالترقية يدويًا
npm install next@latest react@rc react-dom@rc

نحن متحمسون أيضًا لمشاركة المزيد حول ما سيأتي في Next.js Conf يوم الخميس الموافق 24 أكتوبر.

إليك ما هو جديد في Next.js 15:

أداة @next/codemod CLI: ترقية سهلة إلى أحدث إصدارات Next.js وReact.
واجهات برمجة تطبيقات الطلبات غير المتزامنة (تغيير كبير): خطوة تدريجية نحو نموذج مبسط للعرض والتخزين المؤقت.
دلالات التخزين المؤقت (تغيير كبير): طلبات fetch، ومعالجات المسار GET، والتنقلات على جانب العميل لم تعد مخزنة مؤقتًا افتراضيًا.
دعم React 19: دعم لـ React 19، ومترجم React (تجريبي)، وتحسينات في أخطاء التمييه.
Turbopack للتطوير (مستقر): تحسينات في الأداء والاستقرار.
مؤشر ثابت: مؤشر مرئي جديد يظهر المسارات الثابتة أثناء التطوير.
واجهة برمجة التطبيقات unstable_after (تجريبي): تنفيذ التعليمات البرمجية بعد انتهاء تدفق الاستجابة.
واجهة برمجة التطبيقات instrumentation.js (مستقر): واجهة برمجة تطبيقات جديدة لمراقبة دورة حياة الخادم.
نماذج محسنة (next/form): تحسين نماذج HTML مع التنقل على جانب العميل.
next.config: دعم TypeScript لـ next.config.ts.
تحسينات الاستضافة الذاتية: مزيد من التحكم في رؤوس Cache-Control.
أمان إجراءات الخادم: نقاط نهاية غير قابلة للتخمين وإزالة الإجراءات غير المستخدمة.
حزم الحزم الخارجية (مستقر): خيارات تكوين جديدة لموجه التطبيق وموجه الصفحات.
دعم ESLint 9: إضافة دعم لـ ESLint 9.
أداء التطوير والبناء: تحسين أوقات البناء وتحديث سريع أسرع.

ترقيات سلسة مع أداة `@next/codemod` CLI

نقوم بتضمين تحويلات الأكواد (تحويلات الأكواد الآلية) مع كل إصدار رئيسي من Next.js للمساعدة في أتمتة ترقية التغييرات الكبيرة.

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

Terminal

npx @next/codemod@canary upgrade latest

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

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

تعرف على المزيد حول أداة تحويل أكواد Next.js CLI.

واجهات برمجة تطبيقات الطلبات غير المتزامنة (تغيير كبير)

في العرض من جانب الخادم التقليدي (SSR)، ينتظر الخادم الطلب قبل عرض أي محتوى. ومع ذلك، لا تعتمد جميع المكونات على بيانات محددة للطلب، لذا ليس من الضروري انتظار الطلب لعرضها. من الناحية المثالية، سيقوم الخادم بإعداد أكبر قدر ممكن قبل وصول الطلب. لتمكين ذلك، وتهيئة المرحلة للتحسينات المستقبلية، نحتاج إلى معرفة متى ننتظر الطلب.

لذلك، نقوم بتحويل واجهات برمجة التطبيقات التي تعتمد على بيانات محددة للطلب - مثل headers و cookies و params و searchParams - إلى غير متزامنة.

import { cookies } from 'next/headers';
 
export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');
 
  // ...
}

هذا تغيير كبير ويؤثر على واجهات برمجة التطبيقات التالية:

cookies
headers
draftMode
params في layout.js و page.js و route.js و default.js و generateMetadata و generateViewport
searchParams في page.js

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

Terminal

npx @next/codemod@canary next-async-request-api .

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

دلالات التخزين المؤقت

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

بناءً على ملاحظاتكم، قمنا بإعادة تقييم استدلالات التخزين المؤقت الخاصة بنا وكيفية تفاعلها مع مشاريع مثل العرض المسبق الجزئي (PPR) ومع مكتبات الطرف الثالث التي تستخدم fetch.

مع Next.js 15، نقوم بتغيير الافتراضي للتخزين المؤقت لمعالجات مسار GET وذاكرة التخزين المؤقت لموجه العميل من التخزين المؤقت افتراضيًا إلى عدم التخزين المؤقت افتراضيًا. إذا كنت ترغب في الاحتفاظ بالسلوك السابق، يمكنك الاستمرار في اختيار التخزين المؤقت.

سنواصل تحسين التخزين المؤقت في Next.js في الأشهر القادمة وسنشارك المزيد من التفاصيل قريبًا.

لم تعد معالجات مسار `GET` مخزنة مؤقتًا افتراضيًا

في Next.js 14، كانت معالجات المسار التي تستخدم طريقة HTTP GET مخزنة مؤقتًا افتراضيًا ما لم تستخدم وظيفة ديناميكية أو خيار تكوين ديناميكي. في Next.js 15، لم تعد وظائف GET مخزنة مؤقتًا افتراضيًا.

لا يزال بإمكانك اختيار التخزين المؤقت باستخدام خيار تكوين مسار ثابت مثل export dynamic = 'force-static'.

تبقى معالجات المسار الخاصة مثل sitemap.ts و opengraph-image.tsx و icon.tsx، وملفات البيانات الوصفية الأخرى ثابتة افتراضيًا ما لم تستخدم وظائف ديناميكية أو خيارات تكوين ديناميكية.

لم تعد ذاكرة التخزين المؤقت لموجه العميل تخزن مكونات الصفحة افتراضيًا

في Next.js 14.2.0، قدمنا علامة staleTimes التجريبية للسماح بتكوين مخصص لـ ذاكرة التخزين المؤقت للموجه.

في Next.js 15، لا تزال هذه العلامة متاحة، لكننا نقوم بتغيير السلوك الافتراضي ليكون staleTime بقيمة 0 لمقاطع الصفحة. هذا يعني أنه أثناء التنقل في تطبيقك، سيعكس العميل دائمًا أحدث البيانات من مكون (مكونات) الصفحة التي تصبح نشطة كجزء من التنقل. ومع ذلك، لا تزال هناك سلوكيات مهمة لم تتغير:

لن يتم إعادة جلب بيانات التخطيط المشتركة من الخادم لمواصلة دعم العرض الجزئي.
سيستمر التنقل للخلف/للأمام في الاستعادة من ذاكرة التخزين المؤقت لضمان قدرة المتصفح على استعادة موضع التمرير.
سيظل loading.js مخزنًا مؤقتًا لمدة 5 دقائق (أو قيمة تكوين staleTimes.static).

يمكنك اختيار سلوك ذاكرة التخزين المؤقت السابقة لموجه العميل عن طريق تعيين التكوين التالي:

next.config.ts

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
    },
  },
};
 
export default nextConfig;

React 19

كجزء من إصدار Next.js 15، اتخذنا قرارًا بمحاذاة الإصدار القادم من React 19.

في الإصدار 15، يستخدم موجه التطبيق React 19 RC، وقمنا أيضًا بإدخال توافق مع الإصدارات السابقة لـ React 18 مع موجه الصفحات بناءً على ملاحظات المجتمع. إذا كنت تستخدم موجه الصفحات، فهذا يسمح لك بالترقية إلى React 19 عندما تكون جاهزًا.

على الرغم من أن React 19 لا يزال في مرحلة RC، فإن اختباراتنا المكثقة عبر التطبيقات الواقعية وعملنا الوثيق مع فريق React قد منحنا الثقة في استقراره. التغييرات الكبيرة الأساسية تم اختبارها جيدًا ولن تؤثر على مستخدمي موجه التطبيق الحاليين. لذلك، قررنا إصدار Next.js 15 كمستقر الآن، بحيث تكون مشاريعك جاهزة بالكامل لـ React 19 GA.

لضمان أن يكون الانتقال سلسًا قدر الإمكان، قدمنا تحويلات أكواد وأدوات آلية للمساعدة في تسهيل عملية الهجرة.

اقرأ دليل ترقية Next.js 15، ودليل ترقية React 19، وشاهد محاضرة React Conf الرئيسية لمعرفة المزيد.

موجه الصفحات على React 18

يحافظ Next.js 15 على التوافق مع الإصدارات السابقة لموجه الصفحات مع React 18، مما يسمح للمستخدمين بالاستمرار في استخدام React 18 مع الاستفادة من التحسينات في Next.js 15.

منذ الإصدار المرشح الأول (RC1)، حولنا تركيزنا لتشمل دعم React 18 بناءً على ملاحظات المجتمع. هذه المرونة تتيح لك تبني Next.js 15 أثناء استخدام موجه الصفحات مع React 18، مما يمنحك تحكمًا أكبر في مسار الترقية الخاص بك.

ملاحظة: بينما من الممكن تشغيل موجه الصفحات على React 18 وموجه التطبيق على React 19 في نفس التطبيق، لا نوصي بهذا الإعداد. قد يؤدي ذلك إلى سلوك غير متوقع وعدم تناسق في الكتابة، حيث أن واجهات برمجة التطبيقات الأساسية ومنطق العرض بين الإصدارين قد لا يتوافقان بالكامل.

مترجم React (تجريبي)

مترجم React هو مترجم تجريبي جديد تم إنشاؤه بواسطة فريق React في Meta. يفهم المترجم التعليمات البرمجية الخاصة بك بعمق من خلال فهمه لمعاني JavaScript العادية و قواعد React، مما يسمح له بإضافة تحسينات تلقائية إلى التعليمات البرمجية الخاصة بك. يقلل المترجم من مقدار الحفظ اليدوي الذي يتعين على المطورين القيام به من خلال واجهات برمجة التطبيقات مثل useMemo و useCallback - مما يجعل التعليمات البرمجية أبسط وأسهل في الصيانة وأقل عرضة للأخطاء.

مع Next.js 15، أضفنا دعمًا لـ مترجم React. تعرف على المزيد حول مترجم React، و خيارات تكوين Next.js المتاحة.

ملاحظة: مترجم React متاح حاليًا فقط كإضافة Babel، مما سيؤدي إلى إبطاء أوقات التطوير والبناء.

تحسينات أخطاء التهيئة (Hydration error improvements)

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

على سبيل المثال، هذه كانت رسالة خطأ التهيئة السابقة في Next.js 14.1:

قامت Next.js 15 بتحسين هذا إلى:

Turbopack Dev

يسعدنا الإعلان أن next dev --turbo أصبح الآن مستقرًا وجاهزًا لتسريع تجربة التطوير لديك. لقد كنا نستخدمه للتكرار على vercel.com، nextjs.org، v0، وجميع تطبيقاتنا الأخرى بنتائج رائعة.

على سبيل المثال، مع vercel.com، وهو تطبيق Next.js كبير، لاحظنا:

أسرع بنسبة تصل إلى 76.7% في بدء تشغيل الخادم المحلي.
أسرع بنسبة تصل إلى 96.3% في تحديثات الكود مع Fast Refresh.
أسرع بنسبة تصل إلى 45.8% في تجميع المسار الأولي بدون التخزين المؤقت (لا يمتلك Turbopack تخزينًا مؤقتًا على القرص بعد).

يمكنك معرفة المزيد عن Turbopack Dev في منشور المدونة الجديد.

مؤشر المسار الثابت (Static Route Indicator)

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

يمكنك أيضًا استخدام ناتج next build لعرض استراتيجية العرض لجميع المسارات.

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

تعرف على المزيد حول مؤشر المسار الثابت، والذي يمكن تعطيله.

تنفيذ الكود بعد الرد باستخدام `unstable_after` (تجريبي)

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

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

after() هو واجهة برمجة تطبيقات (API) تجريبية جديدة تحل هذه المشكلة من خلال السماح لك بجدولة العمل ليتم معالجته بعد انتهاء تدفق الرد، مما يتيح للمهام الثانوية التشغيل دون حظر الرد الأساسي.

لاستخدامها، أضف experimental.after إلى next.config.js:

next.config.ts

const nextConfig = {
  experimental: {
    after: true,
  },
};
 
export default nextConfig;

ثم، استورد الدالة في مكونات الخادم (Server Components)، أو إجراءات الخادم (Server Actions)، أو معالجات المسار (Route Handlers)، أو البرمجيات الوسيطة (Middleware).

import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';
 
export default function Layout({ children }) {
  // مهمة ثانوية
  after(() => {
    log();
  });
 
  // مهمة أساسية
  return <>{children}</>;
}

تعرف على المزيد حول unstable_after.

`instrumentation.js` (مستقر)

ملف instrumentation، مع واجهة برمجة التطبيقات register()، يسمح للمستخدمين بالوصول إلى دورة حياة خادم Next.js لمراقبة الأداء، وتتبع مصدر الأخطاء، والتكامل العميق مع مكتبات المراقبة مثل OpenTelemetry.

هذه الميزة أصبحت الآن مستقرة ويمكن إزالة خيار التكوين experimental.instrumentationHook.

بالإضافة إلى ذلك، تعاونا مع Sentry لتصميم خطاف onRequestError جديد يمكن استخدامه لـ:

التقاط سياق مهم حول جميع الأخطاء التي يتم طرحها على الخادم، بما في ذلك:
- الموجه (Router): موجه الصفحات (Pages Router) أو موجه التطبيق (App Router)
- سياق الخادم: مكون الخادم (Server Component)، إجراء الخادم (Server Action)، معالج المسار (Route Handler)، أو البرمجيات الوسيطة (Middleware)
إرسال الأخطاء إلى مزود المراقبة المفضل لديك.

export async function onRequestError(err, request, context) {
  await fetch('https://...', {
    method: 'POST',
    body: JSON.stringify({ message: err.message, request, context }),
    headers: { 'Content-Type': 'application/json' },
  });
}
 
export async function register() {
  // تهيئة SDK مزود المراقبة المفضل لديك
}

تعرف على المزيد حول دالة onRequestError.

مكون `<Form>`

مكون <Form> الجديد يمتد لعنصر HTML <form> مع الجلب المسبق (prefetching)، التنقل من جانب العميل (client-side navigation)، والتحسين التدريجي.

هو مفيد للنماذج التي تنتقل إلى صفحة جديدة، مثل نموذج البحث الذي يؤدي إلى صفحة النتائج.

app/page.jsx

import Form from 'next/form';
 
export default function Page() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  );
}

يأتي مكون <Form> مع:

الجلب المسبق (Prefetching): عندما يكون النموذج في العرض، يتم جلب التخطيط (layout) وواجهة المستخدم للتحميل (loading) مسبقًا، مما يجعل التنقل سريعًا.
التنقل من جانب العميل (Client-side Navigation): عند الإرسال، يتم الحفاظ على التخطيطات المشتركة وحالة العميل.
التحسين التدريجي (Progressive Enhancement): إذا لم يتم تحميل JavaScript بعد، يعمل النموذج عبر التنقل لصفحة كاملة.

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

مثال

// ملاحظة: هذا مختصر لأغراض التوضيح.
// غير موصى به للاستخدام في كود الإنتاج.
 
'use client'
 
import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
 
export default function Form(props) {
  const action = props.action
  const router = useRouter()
 
  useEffect(() => {
    // إذا كان هدف النموذج هو URL، قم بجلبها مسبقًا
    if (typeof action === 'string') {
      router.prefetch(action)
    }
  }, [action, router])
 
  function onSubmit(event) {
    event.preventDefault()
 
    // احصل على جميع حقول النموذج وقم بتشغيل `router.push` مع البيانات المشفرة في URL
    const formData = new FormData(event.currentTarget)
    const data = new URLSearchParams()
 
    for (const [name, value] of formData) {
      data.append(name, value as string)
    }
 
    router.push(`${action}?${data.toString()}`)
  }
 
  if (typeof action === 'string') {
    return <form onSubmit={onSubmit} {...props} />
  }
 
  return <form {...props} />
}

تعرف على المزيد حول مكون <Form>.

دعم `next.config.ts`

تدعم Next.js الآن نوع ملف TypeScript next.config.ts وتوفر نوع NextConfig للإكمال التلقائي وخيارات آمنة للنوع:

next.config.ts

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  /* خيارات التكوين هنا */
};
 
export default nextConfig;

تعرف على المزيد حول دعم TypeScript في Next.js.

تحسينات للاستضافة الذاتية

عند استضافة التطبيقات ذاتيًا، قد تحتاج إلى مزيد من التحكم في توجيهات Cache-Control.

إحدى الحالات الشائعة هي التحكم في فترة stale-while-revalidate المرسلة لصفحات ISR. قمنا بتنفيذ تحسينين:

يمكنك الآن تكوين قيمة expireTime في next.config. كان هذا سابقًا خيار experimental.swrDelta.
تم تحديث القيمة الافتراضية إلى سنة واحدة، مما يضمن أن معظم شبكات CDN يمكنها تطبيق دلالات stale-while-revalidate بالكامل كما هو مقصود.

كما أننا لم نعد نستبدل قيم Cache-Control المخصصة بقيمنا الافتراضية، مما يسمح بالتحكم الكامل ويضمن التوافق مع أي إعداد CDN.

أخيرًا، قمنا بتحسين تحسين الصور عند الاستضافة الذاتية. سابقًا، كنا نوصي بتثبيت sharp لتحسين الصور على خادم Next.js الخاص بك. هذه التوصية كانت أحيانًا تُفوت. مع Next.js 15، لم تعد بحاجة إلى تثبيت sharp يدويًا - ستستخدم Next.js sharp تلقائيًا عند استخدام next start أو التشغيل مع وضع الإخراج المستقل (standalone output mode).

لمعرفة المزيد، شاهد الفيديو التوضيحي والبرنامج التعليمي الجديد حول استضافة Next.js ذاتيًا.

تعزيز الأمان لإجراءات الخادم (Enhanced Security for Server Actions)

إجراءات الخادم (Server Actions) هي دوال من جانب الخادم يمكن استدعاؤها من العميل. يتم تعريفها عن طريق إضافة التوجيه 'use server' في أعلى الملف وتصدير دالة غير متزامنة.

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

لتحسين الأمان، قمنا بإدخال التحسينات التالية:

إزالة الكود الميت (Dead code elimination): لن يتم الكشف عن معرفات إجراءات الخادم غير المستخدمة في حزمة JavaScript من جانب العميل، مما يقلل حجم الحزمة ويحسن الأداء.
معرفات الإجراء الآمنة (Secure action IDs): تقوم Next.js الآن بإنشاء معرفات غير قابلة للتخمين وغير حتمية للسماح للعميل بالإشارة إلى إجراء الخادم واستدعائه. يتم إعادة حساب هذه المعرفات بشكل دوري بين عمليات البناء لتعزيز الأمان.

// app/actions.js
'use server';
 
// هذا الإجراء **مستخدم** في تطبيقنا، لذا Next.js
// ستنشئ معرفًا آمنًا للسماح للعميل بالإشارة
// واستدعاء إجراء الخادم.
export async function updateUserAction(formData) {}
 
// هذا الإجراء **غير مستخدم** في تطبيقنا، لذا Next.js
// ستزيل هذا الكود تلقائيًا أثناء `next build`
// ولن تنشئ نقطة نهاية عامة.
export async function deleteUserAction(formData) {}

يجب أن تعامل إجراءات الخادم على أنها نقاط نهاية HTTP عامة. تعرف على المزيد حول تأمين إجراءات الخادم.

تحسين تجميع الحزم الخارجية (مستقر)

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

في موجه الصفحات (Pages Router)، لا يتم تجميع الحزم الخارجية افتراضيًا، ولكن يمكنك تقديم قائمة بالحزم لتجميعها باستخدام خيار transpilePackages الموجود. مع خيار التكوين هذا، تحتاج إلى تحديد كل حزمة.

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

next.config.ts

const nextConfig = {
  // تجميع الحزم الخارجية تلقائيًا في موجه الصفحات:
  bundlePagesRouterDependencies: true,
  // إلغاء تضمين حزم محددة من التجميع لكل من موجه التطبيق وموجه الصفحات:
  serverExternalPackages: ['package-name'],
};
 
export default nextConfig;

تعرف على المزيد حول تحسين الحزم الخارجية.

دعم ESLint 9

تقدم Next.js 15 أيضًا دعمًا لـ ESLint 9، بعد انتهاء دعم ESLint 8 في 5 أكتوبر 2024.

لضمان انتقال سلس، تظل Next.js متوافقة مع الإصدارات السابقة، مما يعني أنه يمكنك الاستمرار في استخدام ESLint 8 أو 9.

إذا قمت بالترقية إلى ESLint 9، واكتشفنا أنك لم تتبنَ بعد تنسيق التكوين الجديد، ستطبق Next.js تلقائيًا مخرج الطوارئ ESLINT_USE_FLAT_CONFIG=false لتسهيل الهجرة.

بالإضافة إلى ذلك، سيتم إزالة الخيارات المهملة مثل —ext و —ignore-path عند تشغيل next lint. يرجى ملاحظة أن ESLint ستحظر في النهاية هذه التكوينات القديمة في ESLint 10، لذا نوصي ببدء الهجرة قريبًا.

لمزيد من التفاصيل حول هذه التغييرات، تحقق من دليل الهجرة.

كجزء من هذا التحديث، قمنا أيضًا بترقية eslint-plugin-react-hooks إلى v5.0.0، والذي يقدم قواعد جديدة لاستخدام React Hooks. يمكنك مراجعة جميع التغييرات في سجل التغييرات لـ [email protected].

تحسينات التطوير والبناء

HMR لمكونات الخادم (Server Components HMR)

أثناء التطوير، يتم إعادة تنفيذ مكونات الخادم عند الحفظ. هذا يعني أن أي طلبات fetch إلى نقاط نهاية API الخاصة بك أو خدمات الطرف الثالث يتم استدعاؤها أيضًا.

لتحسين أداء التطوير المحلي وتقليل التكاليف المحتملة لاستدعاءات API المدفوعة، نضمن الآن أن Hot Module Replacement (HMR) يمكنه إعادة استخدام استجابات fetch من العروض السابقة.

تعرف على المزيد حول ذاكرة التخزين المؤقت لـ HRM لمكونات الخادم.

توليد ثابت أسرع لموجه التطبيق (App Router)

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

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

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

تحكم متقدم في التوليد الثابت (تجريبي)

أضفنا دعمًا تجريبيًا لمزيد من التحكم في عملية التوليد الثابت لحالات الاستخدام المتقدمة التي ستستفيد من تحكم أكبر.

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

next.config.ts

const nextConfig = {
  experimental: {
    // عدد المرات التي سيعيد فيها Next.js محاولة إنشاء الصفحات الفاشلة
    // قبل فشل البناء
    staticGenerationRetryCount: 1
    // عدد الصفحات التي سيتم معالجتها لكل عامل
    staticGenerationMaxConcurrency: 8
    // الحد الأدنى لعدد الصفحات قبل تشغيل عامل تصدير جديد
    staticGenerationMinPagesPerWorker: 25
  },
}
 
export default nextConfig;

تعرف على المزيد حول خيارات التوليد الثابت.

تغييرات أخرى

[تغيير جذري] next/image: تمت إزالة squoosh لصالح sharp كاعتماد اختياري (PR)
[تغيير جذري] next/image: تغيير Content-Disposition الافتراضي إلى attachment (PR)
[تغيير جذري] next/image: خطأ عند وجود مسافات بادئة أو لاحقة في src (PR)
[تغيير جذري] Middleware: تطبيق شرط react-server للحد من استيراد واجهات برمجة تطبيقات React غير الموصى بها (PR)
[تغيير جذري] next/font: إزالة دعم الحزمة الخارجية @next/font (PR)
[تغيير جذري] next/font: إزالة التجزئة (hashing) لـ font-family (PR)
[تغيير جذري] التخزين المؤقت: سيضبط force-dynamic الآن افتراضيًا no-store لذاكرة التخزين المؤقت لـ fetch (PR)
[تغيير جذري] التكوين: تمكين swcMinify (PR), missingSuspenseWithCSRBailout (PR), و outputFileTracing (PR) بشكل افتراضي وإزالة الخيارات المهملة
[تغيير جذري] إزالة التقييس التلقائي لـ Speed Insights (يجب الآن استخدام الحزمة المخصصة @vercel/speed-insights) (PR)
[تغيير جذري] إزالة امتداد .xml لمسارات خريطة الموقع الديناميكية ومحاذاة عناوين URL لخريطة الموقع بين التطوير والإنتاج (PR)
[تغيير جذري] لقد أهملنا تصدير export const runtime = "experimental-edge" في موجه التطبيق. يجب على المستخدمين الآن التبديل إلى export const runtime = "edge". أضفنا أداة تحويل أكواد لتنفيذ هذا (PR)
[تغيير جذري] استدعاء revalidateTag و revalidatePath أثناء العرض سيثير الآن خطأ (PR)
[تغيير جذري] ملفات instrumentation.js و middleware.js ستستخدم الآن حزم React الموردة (PR)
[تغيير جذري] تم تحديث الحد الأدنى المطلوب لإصدار Node.js إلى 18.18.0 (PR)
[تغيير جذري] next/dynamic: تمت إزالة الخاصية المهملة suspense ولن يتم إدراج حدود Suspense فارغة عند استخدام المكون في موجه التطبيق (PR)
[تغيير جذري] عند حل الوحدات النمطية في وقت تشغيل Edge، لن يتم تطبيق شرط الوحدة النمطية worker (PR)
[تغيير جذري] منع استخدام خيار ssr: false مع next/dynamic في مكونات الخادم (PR)
[تحسين] Metadata: تم تحديث متغيرات البيئة الاحتياطية لـ metadataBase عند الاستضافة على Vercel (PR)
[تحسين] إصلاح tree-shaking مع الواردات المختلطة من مساحة الاسم والمسماة من optimizePackageImports (PR)
[تحسين] Parallel Routes: توفير مسارات catch-all غير المتطابقة مع جميع المعلمات المعروفة (PR)
[تحسين] خيار التكوين bundlePagesExternals أصبح الآن مستقرًا وتمت إعادة تسميته إلى bundlePagesRouterDependencies
[تحسين] خيار التكوين serverComponentsExternalPackages أصبح الآن مستقرًا وتمت إعادة تسميته إلى serverExternalPackages
[تحسين] create-next-app: تتجاهل المشاريع الجديدة جميع ملفات .env افتراضيًا (PR)
[تحسين] تمت ترقية outputFileTracingRoot, outputFileTracingIncludes و outputFileTracingExcludes من التجريبي وأصبحت الآن مستقرة (PR)
[تحسين] تجنب دمج ملفات CSS العامة مع ملفات وحدات CSS الأعمق في الشجرة (PR)
[تحسين] يمكن تحديد معالج التخزين المؤقت عبر متغير البيئة NEXT_CACHE_HANDLER_PATH (PR)
[تحسين] يدعم موجه الصفحات الآن كلًا من React 18 و React 19 (PR)
[تحسين] يعرض غلاف الخطأ الآن زرًا لنسخ عنوان URL لمفتش Node.js إذا كان المفتش ممكّنًا (PR)
[تحسين] تستخدم الجلب المسبق للعميل في موجه التطبيق الآن سمة priority (PR)
[تحسين] يوفر Next.js الآن دالة unstable_rethrow لإعادة طرح أخطاء Next.js الداخلية في موجه التطبيق (PR)
[تحسين] يمكن الآن استخدام unstable_after في الصفحات الثابتة (PR)
[تحسين] إذا تم استخدام مكون next/dynamic أثناء SSR، فسيتم جلب القطعة مسبقًا (PR)
[تحسين] خيار esmExternals مدعوم الآن في موجه التطبيق (PR)
[تحسين] يمكن استخدام خيار experimental.allowDevelopmentBuild للسماح بـ NODE_ENV=development مع next build لأغراض التصحيح (PR)
[تحسين] تم تعطيل تحويلات Server Action الآن في موجه الصفحات (PR)
[تحسين] سيتوقف عمال البناء الآن عن تعليق البناء عند خروجهم (PR)
[تحسين] عند إعادة التوجيه من Server Action، سيتم تطبيق عمليات إعادة التحقق الآن بشكل صحيح (PR)
[تحسين] يتم الآن التعامل مع المعلمات الديناميكية بشكل صحيح للمسارات المتوازية في وقت تشغيل Edge (PR)
[تحسين] ستحترم الصفحات الثابتة الآن staleTime بعد التحميل الأولي (PR)
[تحسين] تم تحديث vercel/og بإصلاح تسرب الذاكرة (PR)
[تحسين] تم تحديث أوقات التصحيح للسماح باستخدام حزم مثل msw لمحاكاة واجهات برمجة التطبيقات (PR)
[تحسين] يجب أن تستخدم الصفحات المقدمة مسبقًا staleTime ثابتًا (PR)

لمعرفة المزيد، راجع دليل الترقية.

المساهمون

Next.js هو نتيجة العمل المشترك لأكثر من 3000 مطور فردي، وشركاء صناعيين مثل Google و Meta، وفريقنا الأساسي في Vercel. هذا الإصدار تم بفضل:

فريق Next.js: Andrew, Hendrik, Janka, Jiachi, Jimmy, Jiwon, JJ, Josh, Sam, Sebastian, Sebbie, Shu, Wyatt, و Zack.
فريق Turbopack: Alex, Benjamin, Donny, Maia, Niklas, Tim, Tobias, و Will.
فريق وثائق Next.js: Delba, Rich, Ismael, و Lee.

شكر خاص لـ @AbhiShake1, @Aerilym, @AhmedBaset, @AnaTofuZ, @Arindam200, @Arinji2, @ArnaudFavier, @ArnoldVanN, @Auxdible, @B33fb0n3, @Bhavya031, @Bjornnyborg, @BunsDev, @CannonLock, @CrutchTheClutch, @DeepakBalaraman, @DerTimonius, @Develliot, @EffectDoplera, @Ehren12, @Ethan-Arrowood, @FluxCapacitor2, @ForsakenHarmony, @Francoscopic, @Gomah, @GyoHeon, @Hemanshu-Upadhyay, @HristovCodes, @HughHzyb, @IAmKushagraSharma, @IDNK2203, @IGassmann, @ImDR, @IncognitoTGT, @Jaaneek, @JamBalaya56562, @Jeffrey-Zutt, @JohnGemstone, @JoshuaKGoldberg, @Julian-Louis, @Juneezee, @KagamiChan, @Kahitar, @KeisukeNagakawa, @KentoMoriwaki, @Kikobeats, @KonkenBonken, @Kuboczoch, @Lada496, @LichuAcu, @LorisSigrist, @Lsnsh, @Luk-z, @Luluno01, @M-YasirGhaffar, @Maaz-Ahmed007, @Manoj-M-S, @ManuLpz4, @Marukome0743, @MaxLeiter, @MehfoozurRehman, @MildTomato, @MonstraG, @N2D4, @NavidNourani, @Nayeem-XTREME, @Netail, @NilsJacobsen, @Ocheretovich, @OlyaPolya, @PapatMayuri, @PaulAsjes, @PlagueFPS, @ProchaLu, @Pyr33x, @QiuranHu, @RiskyMH, @Sam-Phillemon9493, @Sayakie, @Shruthireddy04, @SouthLink, @Strift, @SukkaW, @Teddir, @Tim-Zj, @TrevorSayre, @Unsleeping, @Willem-Jaap, @a89529294, @abdull-haseeb, @abhi12299, @acdlite, @actopas, @adcichowski, @adiguno, @agadzik, @ah100101, @akazwz, @aktoriukas, @aldosch, @alessiomaffeis, @allanchau, @alpedia0, @amannn, @amikofalvy, @anatoliik-lyft, @anay-208, @andrii-bodnar, @anku255, @ankur-dwivedi, @aralroca, @archanaagivale30, @arlyon, @atik-persei, @avdeev, @baeharam, @balazsorban44, @bangseongbeom, @begalinsaf, @bennettdams, @bewinsnw, @bgw, @blvdmitry, @bobaaaaa, @boris-szl, @bosconian-dynamics, @brekk, @brianshano, @cfrank, @chandanpasunoori, @chentsulin, @chogyejin, @chrisjstott, @christian-bromann, @codeSTACKr, @coderfin, @coltonehrman, @controversial, @coopbri, @creativoma, @crebelskydico, @crutchcorn, @darthmaim, @datner, @davidsa03, @delbaoliveira, @devjiwonchoi, @devnyxie, @dhruv-kaushik, @dineshh-m, @diogocapela, @dnhn, @domdomegg, @domin-mnd, @dvoytenko, @ebCrypto, @ekremkenter, @emmerich, @flybayer, @floriangosse, @forsakenharmony, @francoscopic, @frys, @gabrielrolfsen, @gaojude, @gdborton, @greatvivek11, @gnoff, @guisehn, @GyoHeon, @hamirmahal, @hiro0218, @hirotomoyamada, @housseindjirdeh, @hungdoansy, @huozhi, @hwangstar156, @iampoul, @ianmacartney, @icyJoseph, @ijjk, @imddc, @imranolas, @iscekic, @jantimon, @jaredhan418, @jeanmax1me, @jericopulvera, @jjm2317, @jlbovenzo, @joelhooks, @joeshub, @jonathan-ingram, @jonluca, @jontewks, @joostmeijles, @jophy-ye, @jordienr, @jordyfontoura, @kahlstrm, @karlhorky, @karlkeefer, @kartheesan05, @kdy1, @kenji-webdev, @kevva, @khawajaJunaid, @kidonng, @kiner-tang, @kippmr, @kjac, @kjugi, @kshehadeh, @kutsan, @kwonoj, @kxlow, @leerob, @lforst, @li-jia-nan, @liby, @lonr, @lorensr, @lovell, @lubieowoce, @luciancah, @luismiramirez, @lukahartwig, @lumirlumir, @luojiyin1987, @mamuso, @manovotny, @marlier, @mauroaccornero, @maxhaomh, @mayank1513, @mcnaveen, @md-rejoyan-islam, @mehmetozguldev, @mert-duzgun, @mirasayon, @mischnic, @mknichel, @mobeigi, @molebox, @mratlamwala, @mud-ali, @n-ii-ma, @n1ckoates, @nattui, @nauvalazhar, @neila-a, @neoFinch, @niketchandivade, @nisabmohd, @none23, @notomo, @notrab, @nsams, @nurullah, @okoyecharles, @omahs, @paarthmadan, @pathliving, @pavelglac, @penicillin0, @phryneas, @pkiv, @pnutmath, @qqww08, @r34son, @raeyoung-kim, @remcohaszing, @remorses, @rezamauliadi, @rishabhpoddar, @ronanru, @royalfig, @rubyisrust, @ryan-nauman, @ryohidaka, @ryota-murakami, @s-ekai, @saltcod, @samcx, @samijaber, @sean-rallycry, @sebmarkbage, @shubh73, @shuding, @sirTangale, @sleevezip, @slimbde, @soedirgo, @sokra, @sommeeeer, @sopranopillow, @souporserious, @srkirkland, @steadily-worked, @steveluscher, @stipsan, @styfle, @stylessh, @syi0808, @symant233, @tariknh, @theoludwig, @timfish, @timfuhrmann, @timneutkens, @tknickman, @todor0v, @tokkiyaa, @torresgol10, @tranvanhieu01012002, @txxxxc, @typeofweb, @unflxw, @unstubbable, @versecafe, @vicb, @vkryachko, @wbinnssmith, @webtinax, @weicheng95, @wesbos, @whatisagi, @wiesson, @woutvanderploeg, @wyattjoh, @xiaohanyu, @xixixao, @xugetsu, @yosefbeder, @ypessoa, @ytori, @yunsii, @yurivangeffen, @z0n, @zce, @zhawtof, @zsh77, و @ztanner للمساعدة!