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

الإصدار 13.4 من Next.js

يجعل الإصدار 13.4 من Next.js موجه التطبيق (App Router) مستقرًا، وTurbopack في مرحلة بيتا، ويقدم دعمًا تجريبيًا لإجراءات الخادم (Server Actions).

يعد الإصدار 13.4 من Next.js إصدارًا أساسيًا، حيث يعلن عن استقرار موجه التطبيق (App Router):

  • موجه التطبيق (مستقر):
    • مكونات الخادم في React
    • المسارات المتداخلة والتخطيطات
    • جلب البيانات المبسط
    • البث (Streaming) وSuspense
    • دعم SEO مدمج
  • Turbopack (بيتا): خادم التطوير المحلي الخاص بك، أسرع وبتحسين في الاستقرار
  • إجراءات الخادم (ألفا): تعديل البيانات على الخادم بدون أي JavaScript على العميل

منذ إطلاق Next.js 13 قبل ستة أشهر، كنا نركز على بناء الأسس لمستقبل Next.js - موجه التطبيق (App Router) - بطريقة يمكن تبنيها تدريجيًا دون تغييرات غير ضرورية.

اليوم، مع إطلاق الإصدار 13.4، يمكنك الآن البدء في تبني موجه التطبيق للإنتاج.

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

موجه تطبيق Next.js

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

في منشور الإعلان الأصلي، شاركنا بعض مبادئ التصميم في Next.js:

  • إعداد صفري. استخدم نظام الملفات كواجهة برمجة تطبيقات (API)
  • JavaScript فقط. كل شيء هو دالة
  • عرض من جانب الخادم وتقسيم الشفرة تلقائيًا
  • جلب البيانات متروك للمطور

أصبح Next.js الآن عمره ست سنوات. ظلت مبادئ التصميم الأصلية لدينا - ومع تبني المزيد من المطورين والشركات لـ Next.js، كنا نعمل على ترقية أساسية للإطار لتحقيق هذه المبادئ بشكل أفضل.

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

إعداد صفري. استخدم نظام الملفات كواجهة برمجة تطبيقات

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

pages/about.js
// موجه الصفحات
 
import React from 'react';
export default () => <h1>About us</h1>;

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

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

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

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

هذا ما توصلنا إليه بعد الإصدار الأولي من طلب التعليقات على التخطيطات (Layouts RFC).

app/layout.js
// جديد: موجه التطبيق ✨
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
app/page.js
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

ما هو أكثر أهمية مما تراه هنا هو ما لا تراه. هذا الموجه الجديد (الذي يمكن تبنيته تدريجيًا عبر دليل app/) له بنية مختلفة تمامًا، مبني على أساس مكونات خادم React وSuspense.

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

pages/_app.js
// موجه الصفحات
 
// "التخطيط العام" هذا يغلف جميع المسارات. لا توجد طريقة لتركيب مكونات تخطيط أخرى، ولا يمكنك جلب بيانات عالمية من هذا الملف.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

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

app/layout.js
// جديد: موجه التطبيق ✨
// التخطيط الجذري مشترك للتطبيق بأكمله
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
app/dashboard/layout.js
// يمكن تداخل التخطيطات وتركيبها
export default function DashboardLayout({ children }) {
  return (
    <section>
      <h1>Dashboard</h1>
      {children}
    </section>
  );
}

مع موجه الصفحات، تم استخدام _document لتخصيص الحمولة الأولية من الخادم.

pages/_document.js
// موجه الصفحات
 
// يسمح لك هذا الملف بتخصيص علامات <html> و <body> لطلب الخادم، ولكن يضيف ميزات خاصة بالإطار بدلاً من كتابة عناصر HTML.
import { Html, Head, Main, NextScript } from 'next/document';
 
export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

مع موجه التطبيق، لم تعد بحاجة إلى استيراد <Html> و <Head> و <Body> من Next.js. بدلاً من ذلك، يمكنك فقط استخدام React.

app/layout.js
// جديد: موجه التطبيق ✨
// التخطيط الجذري مشترك للتطبيق بأكمله
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

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

  • سابقًا، كان يمكنك فقط استيراد أنماط CSS العالمية من حزم npm الخارجية (مثل مكتبات المكونات) في _app.js. كانت هذه تجربة مطور أقل من مثالية. مع موجه التطبيق، يمكنك استيراد (ووضع) أي ملف CSS في أي مكون.
  • سابقًا، اختيار عرض من جانب الخادم مع Next.js (عبر getServerSideProps) يعني أن التفاعل مع تطبيقك كان محظورًا حتى يتم ترطيب الصفحة بالكامل. مع موجه التطبيق، قمنا بإعادة هيكلة البنية لتكون متكاملة بعمق مع React Suspense، مما يعني أنه يمكننا ترطيب أجزاء من الصفحة بشكل انتقائي، دون حظر المكونات الأخرى في واجهة المستخدم من أن تكون تفاعلية. يمكن بث المحتوى على الفور من الخادم، مما يحسن أداء التحميل الملحوظ للصفحة.

الموجه هو جوهر ما يجعل Next.js يعمل. لكن الأمر لا يتعلق بالموجه نفسه، بل بكيفية تكامله مع بقية أجزاء الإطار - مثل جلب البيانات.

JavaScript فقط. كل شيء هو دالة

يريد مطورو Next.js وReact كتابة كود JavaScript وTypeScript وتكوين مكونات التطبيق معًا. من منشورنا الأصلي:

pages/index.js
import React from 'react';
import Head from 'next/head';
 
export default () => (
  <div>
    <Head>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
    </Head>
    <h1>Hi. I'm mobile-ready!</h1>
  </div>
);

في الإصدارات المستقبلية من Next.js، أضفنا تحسينًا لتجربة المطور لاستيراد React تلقائيًا لك.

يغلف هذا المكون المنطق الذي يمكن إعادة استخدامه وتكوينه في أي مكان في تطبيقك. مقترنًا بتوجيه نظام الملفات، كان هذا يعني طريقة سهلة للبدء في بناء تطبيقات React التي تشبه كتابة JavaScript وHTML.

على سبيل المثال، إذا كنت تريد جلب بعض البيانات، فإن النسخة الأصلية من Next.js بدت هكذا:

pages/index.js
import React from 'react';
import 'isomorphic-fetch';
 
export default class extends React.Component {
  static async getInitialProps() {
    const res = await fetch('https://api.company.com/user/123');
    const data = await res.json();
    return { username: data.profile.username };
  }
}

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

مع نمو التبني ونضج الإطار، استكشفنا أنماطًا جديدة لجلب البيانات.

كان getInitialProps يعمل على كل من الخادم والعميل. وسعت واجهة برمجة التطبيقات هذه مكون React، مما يسمح لك بإنشاء Promise وإعادة النتائج إلى props المكون.

بينما لا يزال getInitialProps يعمل اليوم، قمنا بعد ذلك بالتقدم نحو الجيل التالي من واجهات برمجة التطبيقات لجلب البيانات بناءً على ملاحظات العملاء: getServerSideProps و getStaticProps.

pages/index.js
// إنشاء نسخة ثابتة من المسار
export async function getStaticProps(context) {
  return { props: {} };
}
// أو عرض المسار ديناميكيًا من جانب الخادم
export async function getServerSideProps(context) {
  return { props: {} };
}

جعلت واجهات برمجة التطبيقات هذه مكان تشغيل الكود الخاص بك أكثر وضوحًا، سواء كان العميل أو الخادم، وسمحت لتطبيقات Next.js بأن تكون محسنة تلقائيًا بشكل ثابت. علاوة على ذلك، سمحت بـتصدير ثابت، مما مكّن Next.js من النشر في أماكن لا تدعم خادمًا (مثل دلو AWS S3).

ومع ذلك، لم يكن هذا "مجرد JavaScript"، وأردنا الالتزام بشكل أقرب بمبدأ التصميم الأصلي لدينا.

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

مع موجه التطبيق، يمكنك جلب البيانات باستخدام بناء الجملة المألوف async و await. لا توجد واجهات برمجة تطبيقات جديدة لتعلمها. بشكل افتراضي، جميع المكونات هي مكونات خادم React، لذا يحدث جلب البيانات بشكل آمن على الخادم. على سبيل المثال:

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

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

app/page.js
import { Tweet } from 'react-tweet';
 
export default async function Page() {
  return <Tweet id="790942692909916160" />;
}

نظرًا لأن الموجه متكامل مع React Suspense، يمكنك عرض محتوى احتياطي بشكل أكثر مرونة أثناء تحميل أجزاء من المحتوى الخاص بك، وكشف المحتوى تدريجيًا كما هو مطلوب.

app/page.js
import { Suspense } from 'react';
import { PostFeed, Weather } from './components';
 
export default function Page() {
  return (
    <section>
      <Suspense fallback={<p>Loading feed...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Loading weather...</p>}>
        <Weather />
      </Suspense>
    </section>
  );
}

علاوة على ذلك، يحدد الموجه انتقالات الصفحات كـتحولات، مما يتيح إمكانية مقاطعة انتقالات المسار.

التقديم التلقائي من جانب الخادم وتقسيم الشفرة

عندما أنشأنا Next.js، كان لا يزال شائعًا بين المطورين تكوين أدوات مثل webpack و babel يدويًا لتشغيل تطبيق React. كانت التحسينات الإضافية مثل التقديم من جانب الخادم (server rendering) أو تقسيم الشفرة (code splitting) غالبًا غير مطبقة في الحلول المخصصة. قامت Next.js، بالإضافة إلى أطر عمل React الأخرى، بإنشاء طبقة تجريد لتنفيذ وإلزام هذه الممارسات الأفضل.

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

كان هذا مفيدًا لكل من التطبيقات المقدمة من الخادم وتطبيقات الصفحة الواحدة (SPA) مع Next.js، حيث كان الأخير غالبًا ما يحمل حزمة JavaScript كبيرة واحدة عند بدء التطبيق. ومع ذلك، لتنفيذ تقسيم الشفرة على مستوى المكون، كان على المطورين استخدام next/dynamic لاستيراد المكونات ديناميكيًا.

app/page.tsx
import dynamic from 'next/dynamic';
 
const DynamicHeader = dynamic(() => import('../components/header'), {
  loading: () => <p>Loading...</p>,
});
 
export default function Home() {
  return <DynamicHeader />;
}

مع موجه التطبيق (App Router)، لا يتم تضمين مكونات الخادم (Server Components) في حزمة JavaScript للمتصفح. يتم تقسيم مكونات العميل (Client Components) تلقائيًا افتراضيًا (إما مع webpack أو Turbopack في Next.js). علاوة على ذلك، نظرًا لأن بنية الموجه بأكملها تدعم التدفق (streaming) و Suspense، يمكنك إرسال أجزاء من واجهة المستخدم تدريجيًا من الخادم إلى العميل.

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

app/layout.tsx
import { getUser } from './auth';
import { Dashboard, Landing } from './components';
 
export default async function Layout() {
  const isLoggedIn = await getUser();
  return isLoggedIn ? <Dashboard /> : <Landing />;
}

Turbopack (Beta)

Turbopack، الحزم الجديد الذي نختبره ونثبته عبر Next.js، يساعد في تسريع التكرارات المحلية أثناء العمل على تطبيق Next.js الخاص بك (عبر next dev --turbo) وسرعان ما سيدعم عمليات البناء للإنتاج (next build --turbo).

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

الآن بعد مرور ستة أشهر، نحن مستعدون للانتقال إلى مرحلة بيتا.

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

استثمارنا في تحسين المحرك التدريجي وطبقة التخزين المؤقت لـ Turbopack لن يسرع فقط التطوير المحلي، ولكن أيضًا عمليات البناء للإنتاج قريبًا. ترقبوا إصدار Next.js المستقبلي حيث ستتمكن من تشغيل next build --turbo لعمليات بناء فورية.

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

إجراءات الخادم (Alpha)

شهد نظام React البيئي الكثير من الابتكار واستكشاف الأفكار حول النماذج، وإدارة حالة النموذج، والتخزين المؤقت وإعادة التحقق من البيانات. مع مرور الوقت، أصبح React أكثر تحديدًا بشأن بعض هذه الأنماط. على سبيل المثال، يوصى باستخدام "المكونات غير المتحكم بها (uncontrolled components)" لحالة النموذج.

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

يسعدنا الإعلان عن دعم تجريبي لـ إجراءات الخادم في Next.js، مما يتيح لك تحويل البيانات على الخادم، واستدعاء الوظائف مباشرة بدون الحاجة إلى إنشاء طبقة API وسيطة.

import kv from './kv';
 
export default function Page({ params }) {
  async function increment() {
    'use server';
    await kv.incr(`post:id:${params.id}`);
  }
 
  return (
    <form action={increment}>
      <button type="submit">Like</button>
    </form>
  );
}

مع إجراءات الخادم، لديك تحويلات بيانات قوية تعتمد على الخادم أولاً، وعدد أقل من JavaScript على جانب العميل، ونماذج محسّنة تدريجيًا.

import db from './db';
import { redirect } from 'next/navigation';
 
async function create(formData: FormData) {
  'use server';
  const post = await db.post.insert({
    title: formData.get('title'),
    content: formData.get('content'),
  });
  redirect(`/blog/${post.slug}`);
}
 
export default function Page() {
  return (
    <form action={create}>
      <input type="text" name="title" />
      <textarea name="content" />
      <button type="submit">Submit</button>
    </form>
  );
}

تم تصميم إجراءات الخادم في Next.js للاندماج العميق مع بقية دورة حياة البيانات، بما في ذلك ذاكرة التخزين المؤقت لـ Next.js، وإعادة التوليد الثابت التدريجي (ISR)، وموجه العميل.

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

import db from './db';
import { revalidateTag } from 'next/cache';
 
async function update(formData: FormData) {
  'use server';
  await db.post.update({
    title: formData.get('title'),
  });
  revalidateTag('posts');
}
 
export default async function Page() {
  const res = await fetch('https://...', { next: { tags: ['posts'] } });
  const data = await res.json();
  // ...
}

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

إجراءات الخادم متاحة اليوم في ألفا مع Next.js 13.4. من خلال اختيار استخدام إجراءات الخادم، سوف يستخدم Next.js قناة الإصدار التجريبي لـ React.

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: true,
  },
};
 
module.exports = nextConfig;

تحسينات أخرى

  • وضع المسودة (Draft Mode): جلب وعرض محتوى المسودة من نظام إدارة المحتوى الخاص بك. يعمل وضع المسودة في كل من pages و app. لقد قمنا بتحسين وتبسيط واجهة برمجة التطبيقات لوضع المعاينة الحالي، والذي يستمر في العمل لـ pages. لا يعمل وضع المعاينة في app - يجب عليك استخدام وضع المسودة.

الأسئلة الشائعة

ماذا يعني استقرار موجه التطبيق؟

وضع علامة على موجه التطبيق (App Router) على أنه مستقر اليوم لا يعني أن عملنا قد اكتمل. الاستقرار يعني أن جوهر موجه التطبيق جاهز للإنتاج وقد تم التحقق منه من خلال اختباراتنا الداخلية، وكذلك العديد من المستخدمين الأوائل لـ Next.js.

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

تم بناء موجه التطبيق على قناة React canary، والتي أصبحت الآن جاهزة لاعتماد الأطر على ميزات مثل مكونات الخادم. معرفة المزيد.

ماذا يعني هذا لوثائق Next.js التجريبية؟

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

نوصي بقراءة دليل التبني التدريجي لموجه التطبيق لمعرفة كيفية تبني موجه التطبيق.

هل سيختفي موجه الصفحات؟

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

يتم دعم وتشجيع استخدام كل من pages/ و app/ معًا في الإنتاج. يمكن تبني موجه التطبيق على أساس كل مسار.

هل هذا يعني أن مكونات الخادم "مكتملة"؟

Next.js هو أحد الأطر التي تختار البناء على بنية React، والتي تشمل مكونات الخادم. نأمل أن تشجع التجربة المقدمة مع موجه التطبيق الأطر الأخرى (أو الأطر الجديدة) على التفكير في استخدام هذه البنية أيضًا.

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

المجتمع

Next.js هو نتيجة العمل المشترك لأكثر من 2600 مطور فردي، وشركاء صناعيين مثل Google و Meta، وفريقنا الأساسي في Vercel. انضم إلى المجتمع على مناقشات GitHub، Reddit، و Discord.

تم تقديم هذا الإصدار بواسطة:

و مساهمات: @shuding, @huozhi, @wyattfry, @styfle, @sreetamdas, @afonsojramos, @timneutkens, @alexkirsz, @chriswdmr, @jankaifer, @pn-code, @kdy1, @sokra, @kwonoj, @martin-wahlberg, @Kikobeats, @JTaylor0196, @sebmarkbage, @ijjk, @gnoff, @jridgewell, @sagarpreet-xflowpay, @balazsorban44, @cprussin, @ForsakenHarmony, @li-jia-nan, @dciug, @albertothedev, @DuCanhGH, @feedthejim, @patrick91, @padmaia, @sophiebits, @eps1lon, @reconbot, @acdlite, @cjmling, @nabsul, @motopods, @hanneslund, @tunamagur0, @devknoll, @apeltop, @maranomynet, @y-tsubuku, @EndangeredMassa, @ykzts, @AviAvinav, @adilansari, @wyattjoh, @charkour, @delbaoliveira, @agadzik, @Just-Moh-it, @rodrigofeijao, @leerob, @juliusmarminge, @koba04, @Phiction, @jessewarren-aa, @ryo-manba, @Yovach, و @dylanjha.