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

يأتي Next.js 15.1 بترقيات أساسية، واجهات برمجة تطبيقات جديدة، وتحسينات في تجربة المطور. تشمل التحديثات الرئيسية:

React 19 (مستقر): أصبح الدعم لـ React 19 متاحًا رسميًا في كل من Pages Router و App Router.
تحسينات في تصحيح الأخطاء: تجربة مطور محسّنة وخريطة مصادر أفضل للمتصفح والطرفية.
after (مستقر): واجهة برمجة تطبيقات جديدة لتنفيذ التعليمات البرمجية بعد انتهاء بث الاستجابة.
forbidden / unauthorized (تجريبي): واجهات برمجة تطبيقات جديدة لتمكين معالجة أخطاء المصادقة بشكل أكثر دقة.

قم بالترقية اليوم، أو ابدأ باستخدام:

Terminal

# استخدم أداة الترقية التلقائية CLI
npx @next/codemod@canary upgrade latest
 
# ...أو قم بالترقية يدويًا
npm install next@latest react@latest react-dom@latest
 
# ...أو ابدأ مشروعًا جديدًا
npx create-next-app@latest

React 19 (مستقر)

يدعم Next.js 15.1 الآن React 19 بالكامل:

لـ Pages Router: يمكنك الآن استخدام React 19 المستقر دون الحاجة إلى إصدارات Release Candidate أو Canary، مع استمرار دعم React 18.
لـ App Router: سنواصل توفير إصدارات React Canary المدمجة. تتضمن هذه جميع تغييرات React 19 المستقرة، بالإضافة إلى ميزات جديدة يتم التحقق منها في الأطر قبل إصدار React جديد.

منذ إصدار Next.js 15، كانت الإضافة الكبيرة لـ React 19 هي "تسخين الأشقاء المسبق".

للحصول على نظرة شاملة على تحديثات React 19، يرجى الرجوع إلى منشور مدونة React 19 الرسمي.

قمنا بتحسينات في تصحيح الأخطاء في Next.js، مما يضمن لك تحديد مصدر المشكلات بسرعة، سواء ظهرت في الطرفية أو المتصفح أو أدوات التصحيح المرفقة. تنطبق هذه التحسينات على كل من Webpack و Turbopack (الآن مستقر مع Next.js 15).

تحسينات خريطة المصادر

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

لرسم خرائط مصادر أكثر دقة قليلاً لأسماء الطرق، نقترح اعتماد Turbopack (الآن مستقر)، والذي لديه معالجة وتحسين أفضل لخرائط المصادر مقارنة بـ Webpack.

لمؤلفي المكتبات: نوصي بملء خاصية ignoreList في خرائط المصادر عند نشر مكتباتك، خاصة إذا كانت مضبوطة كخارجية (مثل في تكوين serverExternalPackages).

إطارات المكدس المطوية

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

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

تحسينات في التحليل

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

تحسينات مع Edge Runtime

عند استخدام Edge runtime، يتم الآن عرض الأخطاء بشكل متسق عبر بيئات التطوير، مما يضمن تصحيح الأخطاء بسلاسة. سابقًا، كانت الأخطاء المسجلة تتضمن فقط الرسالة وليس تتبع المكدس.

قبل وبعد

الطرفية قبل:

Terminal

 ⨯ app/page.tsx (6:11) @ eval
 ⨯ Error: boom
    at eval (./app/page.tsx:12:15)
    at Page (./app/page.tsx:11:74)
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at stringify (<anonymous>)
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at AsyncResource.runInAsyncScope (node:async_hooks:206:9)
digest: "380744807"
  4 | export default function Page() {
  5 |   const throwError = myCallback(() => {
> 6 |     throw new Error('boom')
    |           ^
  7 |   }, [])
  8 |
  9 |   throwError()
 GET / 500 in 2354ms

الطرفية بعد:

Terminal

  ⨯ Error: boom
    at eval (app/page.tsx:6:10)
    at Page (app/page.tsx:5:32)
  4 | export default function Page() {
  5 |   const throwError = myCallback(() => {
> 6 |     throw new Error('boom')
    |          ^
  7 |   }, [])
  8 |
  9 |   throwError() {
  digest: '225828171'
}

طبقة الأخطاء قبل

مثال على طبقة أخطاء Next.js قبل الإصدار 15.1

طبقة الأخطاء بعد

مثال على طبقة أخطاء Next.js بعد الإصدار 15.1

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

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

`after` (مستقر)

أصبحت واجهة برمجة التطبيقات after() مستقرة بعد تقديمها في أول إصدار مرشح لـ Next.js 15.

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

التغييرات الرئيسية

منذ تقديمها، قمنا باستقرار after() ومعالجة الملاحظات بما في ذلك:

تحسين الدعم لخوادم Next.js المستضافة ذاتيًا.
إصلاح الأخطاء لحالات تفاعل after() مع ميزات Next.js الأخرى.
تحسين قابلية التوسع، مما يتيح للأنظمة الأخرى حقن بدائتها الخاصة waitUntil() لتشغيل after().
دعم لواجهات برمجة التطبيقات وقت التشغيل مثل cookies() و headers() في Server Actions و Route Handlers.

app/layout.js

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

اقرأ المزيد عن واجهة برمجة التطبيقات after وكيفية الاستفادة منها في الوثائق.

`forbidden` و `unauthorized` (تجريبي)

يتضمن Next.js 15.1 واجهتي برمجة تطبيقات تجريبيتين، forbidden() و unauthorized()، بناءً على ملاحظات المجتمع.

نود سماع ملاحظاتك — يرجى تجربتها في بيئات التطوير الخاصة بك ومشاركة أفكارك في موضوع النقاش هذا.

نظرة عامة

إذا كنت معتادًا على App Router، فمن المحتمل أنك استخدمت notFound() لتحريك سلوك 404 جنبًا إلى جنب مع ملف not-found.tsx القابل للتخصيص. مع الإصدار 15.1، نقوم بتوسيع هذا النهج لأخطاء التخويل:

• forbidden() يحفز خطأ 403 مع واجهة مستخدم قابلة للتخصيص عبر forbidden.tsx.

• unauthorized() يحفز خطأ 401 مع واجهة مستخدم قابلة للتخصيص عبر unauthorized.tsx.

معلومة مفيدة: كما هو الحال مع أخطاء notFound()، سيكون رمز الحالة 200 إذا تم تحفيز الخطأ بعد إرسال رؤوس الاستجابة الأولية. تعلم المزيد.

تمكين الميزة

نظرًا لأن هذه الميزة لا تزال تجريبية، ستحتاج إلى تمكينها في ملف next.config.ts:

next.config.ts

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  experimental: {
    authInterrupts: true,
  },
};
 
export default nextConfig;

ملاحظة: تم تقديم دعم next.config.ts في Next.js 15. تعلم المزيد.

استخدام `forbidden()` و `unauthorized()`

يمكنك استخدام forbidden() و unauthorized() في Server Actions، Server Components، Client Components، أو Route Handlers. إليك مثال:

import { verifySession } from '@/app/lib/dal';
import { forbidden } from 'next/navigation';
 
export default async function AdminPage() {
  const session = await verifySession();
 
  // تحقق مما إذا كان لدى المستخدم دور 'admin'
  if (session.role !== 'admin') {
    forbidden();
  }
 
  // عرض صفحة المشرف للمستخدمين المصرح لهم
  return <h1>Admin Page</h1>;
}

إنشاء صفحات أخطاء مخصصة

لتخصيص صفحات الأخطاء، أنشئ الملفات التالية:

app/forbidden.tsx

import Link from 'next/link';
 
export default function Forbidden() {
  return (
    <div>
      <h2>ممنوع</h2>
      <p>غير مصرح لك بالوصول إلى هذا المورد.</p>
      <Link href="/">العودة إلى الصفحة الرئيسية</Link>
    </div>
  );
}

app/unauthorized.tsx

import Link from 'next/link';
 
export default function Unauthorized() {
  return (
    <div>
      <h2>غير مصرح</h2>
      <p>يرجى تسجيل الدخول للوصول إلى هذه الصفحة.</p>
      <Link href="/login">الذهاب إلى تسجيل الدخول</Link>
    </div>
  );
}

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

اقرأ الوثائق الخاصة بـ واجهة برمجة التطبيقات unauthorized و forbidden لمزيد من التفاصيل.

تغييرات أخرى

[ميزة] استخدام ESLint 9 في create-next-app (PR)
[ميزة] زيادة الحد الأقصى لعلامات التخزين المؤقت إلى 128 (PR)
[ميزة] إضافة خيار لتعطيل CssChunkingPlugin التجريبي (PR)
[ميزة] إضافة دعم تجريبي لتضمين CSS (PR)
[تحسين] كتم تحذير legacy-js-api في Sass (PR)
[تحسين] إصلاح الرفض غير المعالج عند استخدام إعادة التوجيه (PR)
[تحسين] التأكد من خروج العملية الأصلية عند فشل عامل webpack (PR)
[تحسين] إصلاح اعتراض المسار على مسار catch-all (PR)
[تحسين] إصلاح مشكلة استنساخ الاستجابة في إزالة تكرار الطلبات (PR)
[تحسين] إصلاح إعادة توجيه Server Action بين تخطيطات الجذر المتعددة (PR)
[تحسين] دعم تقديم إضافات MDX كسلاسل لتوافق Turbopack (PR)

المساهمون

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

فريق Next.js: أندرو، هيندريك، جانكا، جياتشي، جيمي، جي وون، جي جي، جوش، جود، سام، سيباستيان، سيبي، وايات، و زاك.
فريق Turbopack: أليكس، بنجامين، دوني، مايا، نيكلاس، تيم، توبياس، و ويل.
فريق وثائق Next.js: ديلبا، ريتش، إسماعيل، و لي.

شكرًا جزيلاً لـ @sokra، @molebox، @delbaoliveira، @eps1lon، @wbinnssmith، @JamBalaya56562، @hyungjikim، @adrian-faustino، @mottox2، @lubieowoce، @bgw، @mknichel، @wyattjoh، @huozhi، @kdy1، @mischnic، @ijjk، @icyJoseph، @acdlite، @unstubbable، @gaojude، @devjiwonchoi، @cena-ko، @lforst، @devpla، @samcx، @styfle، @ztanner، @Marukome0743، @timneutkens، @JeremieDoctrine، @ductnn، @karlhorky، @reynaldichernando، @chogyejin، @y-yagi، @philparzer، @alfawal، @Rhynden، @arlyon، @MJez29، @Goodosky، @themattmayfield، @tobySolutions، @kevinmitch14، @leerob، @emmanuelgautier، @mrhrifat، @lid0a، @boar-is، @nisabmohd، @PapatMayuri، @ovogmap، @Reflex2468، @LioRael، @betterthanhajin، @HerringtonDarkholme، @bpb54321، @ahmoin، @Kikobeats، @abdelrahmanAbouelkheir، @lumirlumir، @yeeed711، @petter، و @suu3 للمساعدة!