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

Next.js 13

يقدم Next.js 13 تخطيطات (Layouts)، مكونات الخادم (React Server Components)، والبث المباشر (Streaming) في دليل التطبيق (app directory)، بالإضافة إلى Turbopack، مكون صورة محسّن، ومكون الخطوط الجديد تمامًا.

كما أعلنا في Next.js Conf، Next.js 13 (الإصدار المستقر) يضع الأساسيات ليكون ديناميكيًا بلا حدود:

Next.js 13 ودليل pages مستقران وجاهزان للإنتاج. قم بالتحديث اليوم عن طريق تشغيل:

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

دليل app الجديد (بيتا)

اليوم، نحسن تجربة التوجيه (Routing) والتخطيطات في Next.js ونواكب مستقبل React مع تقديم دليل app. هذا متابعة لـ Layouts RFC الذي نُشر سابقًا للحصول على تعليقات المجتمع.

دليل app حاليًا في مرحلة بيتا ولا نوصي باستخدامه في الإنتاج بعد. يمكنك استخدام Next.js 13 مع دليل pages بميزات مستقرة مثل مكونات next/image و next/link المحسنة، واختيار استخدام دليل app وفقًا لسرعتك الخاصة. سيستمر دعم دليل pages في المستقبل المنظور.

يتضمن دليل app الدعم لـ:

يمكن تبني دليل app تدريجيًا من دليل pages/ الحالي.

يمكن تبني دليل app تدريجيًا من دليل pages/ الحالي.

التخطيطات (Layouts)

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

يمكن تبني دليل app/ تدريجيًا من دليل pages/ الحالي.

يمكن تبني دليل app/ تدريجيًا من دليل pages/ الحالي.

إنشاء مسارات داخل app/ يتطلب ملفًا واحدًا، page.js:

app/page.js
// هذا الملف يطابق مسار الفهرس (/)
export default function Page() {
  return <h1>مرحبًا، Next.js!</h1>;
}

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

app/blog/layout.js
export default function BlogLayout({ children }) {
  return <section>{children}</section>;
}

تعلم المزيد عن التخطيطات والصفحات أو نشر مثال لتجربته.

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

يقدم دليل app/ دعمًا لهندسة مكونات الخادم (Server Components) الجديدة في React. تستخدم مكونات الخادم و مكونات العميل (Client Components) الخادم والعميل لكل ما هو أفضل فيه - مما يسمح لك ببناء تطبيقات سريعة وعالية التفاعل بنموذج برمجة واحد يوفر تجربة ممتازة للمطور.

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

عند تحميل مسار، سيتم تحميل وقت تشغيل Next.js و React، وهو قابل للتخزين المؤقت و يمكن التنبؤ بحجمه. هذا الوقت التشغيلي لا يزيد حجمه مع نمو تطبيقك. علاوة على ذلك، يتم تحميل وقت التشغيل بشكل غير متزامن، مما يتيح لـ HTML من الخادم أن يتم تحسينه تدريجيًا على العميل.

تعلم المزيد عن مكونات الخادم أو نشر مثال لتجربته.

البث المباشر (Streaming)

يقدم دليل app/ القدرة على التصيير التدريجي وبث وحدات واجهة المستخدم المصرّفة تدريجيًا إلى العميل.

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

يمكنك وضع كود التطبيق الخاص بك، مثل المكونات والاختبارات والأنماط، مع مساراتك.

يمكنك وضع كود التطبيق الخاص بك، مثل المكونات والاختبارات والأنماط، مع مساراتك.

عند النشر على Vercel، تطبيقات Next.js 13 التي تستخدم دليل app/ ستبث الاستجابات افتراضيًا في كل من بيئات تشغيل Node.js و Edge لتحسين الأداء.

تعلم المزيد عن البث المباشر أو نشر مثال لتجربته.

جلب البيانات (Data Fetching)

يقدم دعم Promises RFC الأخير في React طريقة جديدة قوية لجلب البيانات والتعامل مع الوعود (Promises) داخل المكونات:

app/page.js
async function getData() {
  const res = await fetch('https://api.example.com/...');
  // القيمة المرجعة *ليست* متسلسلة
  // يمكنك إرجاع Date، Map، Set، إلخ.
  return res.json();
}
 
// هذا مكون خادم غير متزامن
export default async function Page() {
  const data = await getData();
 
  return <main>{/* ... */}</main>;
}

تم أيضًا توسيع واجهة fetch الأصلية لـ Web API في React و Next.js. إنها تزيل تكرار طلبات fetch تلقائيًا وتوفر طريقة واحدة مرنة لجلب البيانات وتخزينها مؤقتًا وإعادة التحقق منها على مستوى المكون. هذا يعني أن جميع فوائد توليد الموقع الثابت (SSG)، وعرض جانب الخادم (SSR)، وإعادة التوليد الثابت التدريجي (ISR) متاحة الآن من خلال واجهة برمجة تطبيقات واحدة:

// يجب تخزين هذا الطلب مؤقتًا حتى يتم إبطاله يدويًا.
// مشابه لـ `getStaticProps`.
// `force-cache` هو الافتراضي ويمكن حذفه.
fetch(URL, { cache: 'force-cache' });
 
// يجب إعادة جلب هذا الطلب في كل طلب.
// مشابه لـ `getServerSideProps`.
fetch(URL, { cache: 'no-store' });
 
// يجب تخزين هذا الطلب مؤقتًا بعمر 10 ثوانٍ.
// مشابه لـ `getStaticProps` مع خيار `revalidate`.
fetch(URL, { next: { revalidate: 10 } });

في دليل app، يمكنك جلب البيانات داخل التخطيطات، الصفحات، والمكونات - بما في ذلك دعم استجابات البث المباشر من الخادم.

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

مع دليل app/، يمكنك استخدام ملف خاص جديد loading.js لإنشاء واجهة تحميل فورية تلقائيًا مع حدود Suspense.

مع دليل app/، يمكنك استخدام ملف خاص جديد loading.js لإنشاء واجهة تحميل فورية تلقائيًا مع حدود Suspense.

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

تعلم المزيد عن جلب البيانات أو نشر مثال لتجربته.

تقديم Turbopack (ألفا)

يتضمن Next.js 13 Turbopack، خليفة Webpack الجديد المبني على Rust.

تم تنزيل Webpack أكثر من 3 مليارات مرة. بينما كان جزءًا أساسيًا من بناء الويب، فقد وصلنا إلى حدود الأداء الأقصى الممكن باستخدام أدوات تعتمد على JavaScript.

في Next.js 12، بدأنا انتقالنا إلى أدوات تعتمد على Rust الأصلي. بدأنا بالانتقال من Babel، مما أدى إلى تحويل أسرع بـ 17 مرة. ثم استبدلنا Terser، مما أدى إلى تصغير أسرع بـ 6 مرات. حان الوقت للذهاب إلى الأصلي بالكامل للتجميع.

يؤدي استخدام Turbopack ألفا مع Next.js 13 إلى:

  • تحديثات أسرع بـ 700 مرة من Webpack
  • تحديثات أسرع بـ 10 مرات من Vite
  • بدايات باردة أسرع بـ 4 مرات من Webpack

Turbopack هو خليفتنا لـ Webpack المبني على Rust، مع HMR أسرع بـ 700x للتطبيقات الكبيرة.

Turbopack هو خليفتنا لـ Webpack المبني على Rust، مع HMR أسرع بـ 700x للتطبيقات الكبيرة.

Turbopack يقوم فقط بتجميع الحد الأدنى من الأصول المطلوبة في التطوير، لذا فإن وقت البدء سريع للغاية. في تطبيق به 3000 وحدة، يستغرق Turbopack 1.8 ثانية للبدء. يستغرق Vite 11.4 ثانية و يستغرق Webpack 16.5 ثانية.

يدعم Turbopack خارج الصندوق مكونات الخادم، TypeScript، JSX، CSS، والمزيد. خلال مرحلة ألفا، العديد من الميزات غير مدعومة بعد. نحن نتطلع لسماع ملاحظاتك حول استخدام Turbopack لتسريع التكرارات المحلية.

ملاحظة: Turbopack في Next.js يدعم حاليًا فقط next dev. عرض الميزات المدعومة. نحن نعمل أيضًا على إضافة دعم لـ next build عبر Turbopack.

جرب Turbopack ألفا اليوم في Next.js 13 مع next dev --turbo.

next/image

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

خلال استطلاع مجتمع Next.js، أخبرنا 70% من المستجيبين أنهم استخدموا مكون صورة Next.js في الإنتاج، وبدورهم، رأوا تحسينات في Core Web Vitals. مع Next.js 13، نحسن next/image أكثر.

مكون الصورة الجديد:

  • يرسل كمية أقل من JavaScript على العميل
  • أسهل في التنسيق والتهيئة
  • أكثر إتاحة يتطلب علامات alt افتراضيًا
  • يتماشى مع منصة الويب
  • أسرع لأن التحميل الكسول الأصلي لا يتطلب hydration
app/page.js
import Image from 'next/image';
import avatar from './lee.png';
 
export default function Home() {
  // "alt" مطلوب الآن لتحسين الإتاحة
  // اختياري: يمكن وضع ملفات الصور داخل دليل app/
  return <Image alt="leeerob" src={avatar} placeholder="blur" />;
}

تعلم المزيد عن مكون الصورة أو نشر مثال لتجربته.

ترقية next/image إلى Next.js 13

تمت إعادة تسمية مكون الصورة القديم إلى next/legacy/image. قدمنا أداة تعديل تلقائي (codemod) ستقوم تلقائيًا بتحديث استخدامك الحالي لـ next/image إلى next/legacy/image. على سبيل المثال، سيقوم هذا الأمر بتشغيل الأداة على دليل ./pages عند تشغيله من الجذر:

Terminal
npx @next/codemod next-image-to-legacy-image ./pages

تعلم المزيد عن أداة التعديل التلقائي.

@next/font

يقدم Next.js 13 نظام خطوط جديد تمامًا الذي:

  • يحسن خطوطك تلقائيًا، بما في ذلك الخطوط المخصصة
  • يزيل طلبات الشبكة الخارجية لتحسين الخصوصية والأداء
  • يستضيف ذاتيًا تلقائيًا أي ملف خط
  • لا يوجد تغيير في التخطيط تلقائيًا باستخدام خاصية CSS size-adjust

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

app/layout.js / pages/_app.js
import { Inter } from '@next/font/google';
 
const inter = Inter();
 
<html className={inter.className}></html>;

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

app/layout.js / pages/_app.js
import localFont from '@next/font/local';
 
const myFont = localFont({ src: './my-font.woff2' });
 
<html className={myFont.className}></html>;

يمكنك تخصيص كل جزء من تجربة تحميل الخط مع ضمان أداء رائع وعدم وجود تغيير في التخطيط، بما في ذلك font-display، التحميل المسبق، البدائل، والمزيد.

تعلم المزيد عن مكون الخط الجديد أو نشر مثال لتجربته.

لم يعد next/link يتطلب إضافة <a> يدويًا كطفل.

تمت إضافته كخيار تجريبي في 12.2 وهو الآن الافتراضي. في Next.js 13، يقوم <Link> دائمًا بتصيير <a> ويسمح لك بإعادة توجيه الخصائص إلى العلامة الأساسية. على سبيل المثال:

import Link from 'next/link'
 
// Next.js 12: يجب تداخل `<a>` وإلا سيتم استبعاده
<Link href="/about">
  <a>About</a>
</Link>
 
// Next.js 13: `<Link>` يقوم دائمًا بتصيير `<a>`
<Link href="/about">
  About
</Link>

تعلم المزيد عن مكون Link المحسن أو نشر مثال لتجربته.

لترقية الروابط إلى Next.js 13، قمنا بتوفير أداة تحويل تلقائي (codemod) لتحديث قاعدة الكود الخاصة بك تلقائيًا. على سبيل المثال، هذا الأمر سيقوم بتشغيل الأداة على دليل ./pages عند التنفيذ من الجذر:

Terminal
npx @next/codemod new-link ./pages

تعرف على المزيد حول أداة التحويل أو اطلع على الوثائق.

إنشاء صور OG

يمكن لبطاقات الوسائط الاجتماعية، المعروفة أيضًا باسم صور الرسم المفتوح (open graph)، أن تزيد بشكل كبير من معدل التفاعل مع المحتوى الخاص بك، حيث تظهر بعض التجارب تحسنًا يصل إلى 40٪ في معدلات التحويل.

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

لقد أنشأنا مكتبة جديدة @vercel/og تعمل بسلاسة مع Next.js لإنشاء بطاقات وسائط اجتماعية ديناميكية.

pages/api/og.jsx
import { ImageResponse } from '@vercel/og';
 
export const config = {
  runtime: 'experimental-edge',
};
 
export default function () {
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
        }}
      >
        Hello, World!
      </div>
    ),
  );
}

هذه الطريقة أسرع بـ 5 مرات من الحلول الحالية باستخدام وظائف Vercel Edge، وWebAssembly، ومكتبة أساسية جديدة لتحويل HTML وCSS إلى صور والاستفادة من تجريد مكونات React.

تعرف على المزيد حول إنشاء صور OG أو نشر مثال لتجربته.

تحديثات واجهة برمجة تطبيقات Middleware

في Next.js 12، قدمنا Middleware لتمكين المرونة الكاملة مع موجه Next.js. لقد سمعنا ملاحظاتكم حول تصميم واجهة برمجة التطبيقات الأولي وقمنا بإضافات لتحسين تجربة المطور وإضافة وظائف جديدة قوية.

يمكنك الآن تعيين رؤوس الطلب بسهولة أكبر:

middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
 
export function middleware(request: NextRequest) {
  // استنساخ رؤوس الطلب وتعيين رأس جديد `x-version`
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-version', '13');
 
  // يمكنك أيضًا تعيين رؤوس الطلب في NextResponse.rewrite
  const response = NextResponse.next({
    request: {
      // رؤوس طلب جديدة
      headers: requestHeaders,
    },
  });
 
  // تعيين رأس استجابة جديد `x-version`
  response.headers.set('x-version', '13');
  return response;
}

يمكنك الآن أيضًا تقديم استجابة مباشرة من Middleware، دون الحاجة إلى rewrite أو redirect.

middleware.ts
import { NextRequest, NextResponse } from 'next/server';
import { isAuthenticated } from '@lib/auth';
 
// تقييد Middleware على المسارات التي تبدأ بـ `/api/`
export const config = {
  matcher: '/api/:function*',
};
 
export function middleware(request: NextRequest) {
  // استدعاء دالة المصادقة للتحقق من الطلب
  if (!isAuthenticated(request)) {
    // الرد بجسون يشير إلى رسالة خطأ
    return NextResponse.json(
      {
        success: false,
        message: 'فشل المصادقة',
      },
      {
        status: 401,
      },
    );
  }
}

إرسال الردود من Middleware يتطلب حاليًا خيار التكوين experimental.allowMiddlewareResponseBody داخل next.config.js.

تغييرات غير متوافقة مع الإصدارات السابقة

  • تم رفع الحد الأدنى لإصدار React من 17.0.2 إلى 18.2.0.
  • تم رفع الحد الأدنى لإصدار Node.js من 12.22.0 إلى 14.6.0، حيث وصل الإصدار 12.x إلى نهاية دعمه (PR).
  • تم تغيير خاصية التكوين swcMinify من false إلى true. راجع مترجم Next.js لمزيد من المعلومات.
  • تم تغيير اسم استيراد next/image إلى next/legacy/image. تم تغيير اسم استيراد next/future/image إلى next/image. تتوفر أداة تحويل لإعادة تسمية الاستيرادات الخاصة بك بأمان وتلقائيًا.
  • لم يعد يمكن أن يكون العنصر الفرعي لـ next/link هو <a>. أضف الخاصية legacyBehavior لاستخدام السلوك القديم أو أزل <a> للترقية. تتوفر أداة تحويل لترقية الكود الخاص بك تلقائيًا.
  • لم تعد المسارات مسبقة التحميل عندما يكون User-Agent عبارة عن بوت.
  • تمت إزالة خيار target المهمل في next.config.js.
  • تم تغيير المتصفحات المدعومة لإسقاط Internet Explorer واستهداف المتصفحات الحديثة. يمكنك仍然 استخدام Browserslist لتغيير المتصفحات المستهدفة.
    • Chrome 64+
    • Edge 79+
    • Firefox 67+
    • Opera 51+
    • Safari 12+

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

المجتمع

قبل ست سنوات، أطلقنا Next.js للجمهور. هدفنا كان بناء إطار عمل React بدون تكوين يبسط تجربة المطور. بالنظر إلى الوراء، من المدهش رؤية كيف نما المجتمع، وما تمكنا من إنجازه معًا. دعونا نستمر.

Next.js هو نتيجة العمل المشترك لأكثر من 2,400 مطور فردي، وشركاء صناعيين مثل Google وMeta، وفريقنا الأساسي. مع أكثر من 3 ملايين تنزيل أسبوعيًا على npm و94,000 نجمة على GitHub، يعتبر Next.js أحد أكثر الطرق شيوعًا لبناء الويب.

شكر خاص لفريق Aurora في Google Chrome الذي ساعد في البحث والتجارب الأساسية التي أدت إلى هذا الإصدار.

ساهم في هذا الإصدار: @ijjk، @huozhi، @HaNdTriX، @iKethavel، @timneutkens، @shuding، @rishabhpoddar، @hanneslund، @balazsorban44، @devknoll، @anthonyshew، @TomerAberbach، @philippbosch، @styfle، @mauriciomutte، @hayitsdavid، @abdennor، @Kikobeats، @cjdunteman، @Mr-Afonso، @kdy1، @jaril، @abdallah-nour، @North15، @feedthejim، @brunocrosier، @Schniz، @sedlukha، @hashlash، @Ethan-Arrowood، @fireairforce، @migueloller، @leerob، @janicklas-ralph، @Trystanr، @atilafassina، @nramkissoon، @kasperadk، @valcosmos، @henriqueholtz، @nip10، @jesstelford، @lorensr، @AviAvinav، @SukkaW، @jaycedotbin، @saurabhburade، @notrab، @kwonoj، @sanruiz، @angeloashmore، @falsepopsky، @fmontes، @Gebov، @UltiRequiem، @p13lgst، @Simek، @mrkldshv، @thomasballinger، @kyliau، @AdarshKonchady، @endymion1818، @pedro757، @perkinsjr، @gnoff، @jridgewell، @silvioprog، @mabels، @nialexsan، @feugy، @jackromo888، @crazyurus، @EarlGeorge، @MariaSolOs، @lforst، @maximbaz، @maxam2017، @teobler، @Nutlope، @sunwoo0706، @WestonThayer، @Brooooooklyn، @Nsttt، @charlypoly، @aprendendofelipe، @sviridoff، @jackton1، @nuta، @Rpaudel379، @marcialca، @MarDi66، @ismaelrumzan، @javivelasco، @eltociear، و@hiro0218.