عرض مصدر Next.js/react 18

<noinclude>{{DISPLAYTITLE:استخدام React 18 مع Next.js}}</noinclude>
أضافت [https://reactjs.org/blog/2022/03/29/react-v18.html React 18] ميزات جديدة بما فيها ميزة تعليق تنفيذ مكوّن Suspense والترميم batching التلقائي للتحديثات والدلة <code>startTransition</code> الشبيهة بدوال الواجهات البرمجية، بالإضافة إلى الواجهة البرمجية الجديدة لنقل البيانات التي تُصيَّر من جانب الخادم وتدعم <code>React.lazy</code>، علمًا أنّ Next.js تزوّدك أيضًا بواجهة برمجية مشابهة [[Next.js/next streaming|لنقل البيانات المتواصل]].

ولاستخدام React 18 مع Next.js ثبِّت آخر إصدار من React كالتالي:<syntaxhighlight lang="bash">
npm install next@latest react@latest react-dom@latest
</syntaxhighlight>وهكذا ستصبح قادرًا على استخدام ميزتي <code>startTransition</code> و <code>Suspense</code> في Next.js.

== أقنية النقل المتواصل للبيانات المصيرة من جانب الخادم ==
تتضمن تحسينات معمارية لأداء التصيير من جانب الخادم SSR عن طريق استخدام الدالة <code>Suspense</code> في مكوّنات React في نمط أقنية التصيير من جانب الخادم streaming SSR mode كي تُصيِّر React المحتوى على الخادم ثم تنقل التحديثات التي تجري على المحتوى من خلال قنوات HTTP.

تعتمد مكوّنات خادم React (كميزة تجريبية) على مفهوم النقل المتواصل للبيانات، ويمكن الاطلاع أكثر على مكوّنات الخادم المتعلقة بواجهة [[Next.js/next streaming|نقل البيانات في توثيق Next.js]] المتعلق بالموضوع، لكننا سنركز هنا على نقل البيانات في React 18.

=== استخدام النقل المتواصل للبيانات المُصيَّرة من جانب الخادم ===
لن تحتاج إلى أية إعدادات إضافية لاستخدام أقنية البيانات المصيَّرة على الخادم عند استخدام ميزة التعليق Suspense في الصفحات المُصيَّرة من جانب الخادم. يمكن أن تُستخدم أقنية النقل المتواصل للبيانات عند النشر من قبل البنية التحتية للمنصة مثل [https://vercel.com/edge الدوال الحدية] في Vercel (خلال زمن التشغيل) أو خادم Node.js (خلال زمن التشغيل). لا تدعم دوال AWS Lambda حاليًا الاستجابات الخاصة بأقنية البيانات.

تمتلك معظم صفحات SSR القدرة على تصيير المكوّنات إلى قنوات نقل قادرة على توصيل التحديثات باستمرار إلى العميل حتى بعد وصول الاستجابة الأولية التي أرسلها الخادم. عندما ينتهي العمل على أي مكوّن معلَّق سيُصيِّره الخادم وينقله إلى العميل. ويعني هذا قدرة التطبيقات على بث محتوى HTML المتوفِّر حتى قبل وصول جميع البيانات اللازمة مما يؤثر إيجابًا على أداء تحميل الصفحات.

وكميزة إضافية، بإمكان العميل في نمط أ''قنية التصيير من جانب الخادم'' استخدام أسلوب الترطيب الانتقائي selective hydration لاختيار أولوية ترطيب المكوّنات (تنفيذ شيفرة JavaScript الخاصة بها) وفقًا لتفاعل المستخدم وهذا ما يحسّن أداء التحميل أيضًا.

ستبقى المكوِّنات المعلّقة الحدودية react-suspense-boundary خاضعة للتحسين الساكن في الصفحات التي لا تُصيَّر من جانب الخادم، راجع توثيق [[Next.js/next streaming|أقنية نقل SSR]] لمعلومات أوفى.

=== الميزات المتاحة مع أقنية نقل البيانات ===
تدعم Next.js ميزة التحميل المحدود أو الكسول للمكتبات الخارجية باستخدام <code>()import</code> ولمكوّنات React باستخدام <code>next/dynamic</code>. يُساعد تأجيل التحميل في تحسين أداء التحميل ككل بنقليل كمية JavaScript المطلوبة لتصيير الصفحة. إذ تُدرج المكوّنات أو المكتبات وتُضم إلى تجميعة JavaScript عند استخدامها فقط. اطلع على توثيق [[Next.js/dynamic import|الإدراج الديناميكي في Next.js]] لمعلومات أكثر.

=== ملاحظات هامة ===

==== استخدام <code>next/head</code> و <code>next/script</code> ====
لن تعمل عناصر إدراج الموارد مثل السكربتات أو أوراق التنسيق في <code>next/head</code> كما هو مطلوب مع ميزة أقنية نقل البيانات، فلن تضمن توقيت وترتيب إدراج تلك العناصر عبر <code>next/head</code> بمجرد إضافة المكوّنات المعلَّقة الحدودية. لهذا ننصح في هذه الحالة بنقل عناصر إدراج الموارد إلى <code>next/script</code> وفق أحد الأسلوبين <code>afterInteractive</code> أو <code>lazyOnload</code> أو إلى <code>document_</code>. ولنفس السبب، ننصح أيضًا نقل نسخ <code>next/script</code> التي تستخدم استراتيجية <code>beforeInteractive</code> إلى <code>document_</code>.

==== إحضار البيانات ====
تُدعم عملية إحضار البيانات من قبل المكوّنات المعلقة الحدودية <code>Suspense</code> من جانب العميل فقط حاليًا، ولا تُدعم من جانب الخادم.

==== التنسيقات ====
تُعد طرق التنسيق التالية متوافقة مع أقنية نقل بيانات Next.js:

* التنسيق السطري Inline Styles
* التنسيق العام [[Next.js/built in css support#.D8.A5.D8.B6.D8.A7.D9.81.D8.A9%20.D9.88.D8.B1.D9.82.D8.A9%20.D8.AA.D9.86.D8.B3.D9.8A.D9.82.D8.A7.D8.AA%20.D9.85.D9.88.D8.B1.D9.8E.D9.91.D8.AB.D8.A9%20.D8.B9.D8.A7.D9.85.D8.A9%20.D9.81.D9.8A%20Next.js|Global Stylesheets]]
* وحدات التنسيق [[Next.js/built in css support#.D8.A5.D8.B6.D8.A7.D9.81.D8.A9%20.D8.AA.D9.86.D8.B3.D9.8A.D9.82.D8.A7.D8.AA%20CSS%20.D8.B9.D9.84.D9.89%20.D9.85.D8.B3.D8.AA.D9.88.D9.89%20.D8.A7.D9.84.D9.85.D9.83.D9.88.D9.91.D9.86.D8.A7.D8.AA%20.D9.81.D9.8A%20Next.js|CSS Modules]]
* التنسيق باستخدام [[Next.js/built in css support#.D8.A7.D9.84.D8.AA.D9.86.D8.B3.D9.8A.D9.82%20.D8.A8.D8.B5.D9.8A.D8.BA.D8.A9%20CSS-in-JS%20.D9.81.D9.8A%20Next.js|styled-jsx]]

ولا تتوافق تنسيقات CSS-in-JS مثل <code>styled-components</code> و <code>emotion</code> مع أقنية نقل بيانات Next.js حاليًا. 

== مكوّنات خادم React (الإصدار الاختباري Alpha) ==
تُعد مكوّنات React ميزة جديدة تقلل حجم تجميعة JavaScript الخاصة بالتطبيق عن طريق فصل الشيفرة التي تُنفَّذ على الخادم عن شيفرة العميل، ولا تزال هذه الميزة قيد التطوير والبحث.

تتيح لك مكونات خادم React تصيير المكوّنات على الخادم، وهذا أمر مختلف من حيث المبدأ عن التصيير من جانب الخادم SSR التي تولَّد فيها شيفرة HTML على الخادم. لا حاجة مع مكوّنات الخادم لشيفرة JavaScript من جانب العميل مما يسرّع في تصيير الصفحات ويحسّن تجربة المستخدم لتطبيقك ويزاوج بين ميزات التصيير على الخادم والتفاعلية من جانب العميل.

=== تفعيل مكوّنات خادم React ===
لاستخدام مكوّنات خادم React، لا بد من تثبيت أحدث إصدار من React كالتالي:<syntaxhighlight lang="bash">
npm install next@canary react@latest react-dom@latest
</syntaxhighlight>حدّث بعد ذلك ملف التهيئة <code>next.config.js</code>:<syntaxhighlight lang="javascript">
// next.config.js
module.exports = {
  experimental: {
    runtime: 'nodejs',
    serverComponents: true,
  },
}
</syntaxhighlight>يؤدي استخدام الصفة <code>runtime</code> إلى تفعيل أقنية بيانات SSR، كما يدفع ضبط قيمة <code>runtime</code> على <code>'edge'</code> الخادم إلى العمل كليًا في وضع [[Next.js/edge runtime|التشغيل الحدي]] Edge Runtime.

يمكنك الإطلاع على المثال المخصص لعمل مكوّنات خادم React مع Next.js عبر [https://github.com/vercel/next-rsc-demo المستودع المخصص على GitHub].

=== تقاليد استخدام مكوّنات الخادم ===
لتشغيل ملف مكوّن على الخادم، أضف الامتداد <code>server.js.</code> إلى اسم الملف، إذ سيُعامل الملف <code>pages/home.server.js/.</code> مثلًا كمكوّن خادم. بينما يضُاف الامتداد <code>client.js.</code> تقليديًا إلى مكوّنات العميل مثل المكوّن <code>components/avatar.client.js/.</code>

يمكن لمكوّنات الخادم أن تُدرج في شيفرتها مكونات خادم ومكوّنات عميل، بينما لا يمكن لمكوّنات العميل إدراج مكوّنات خادم.

تتعامل Next.js مع المكوّنات التي لا تحمل امتداد مكوّن خادم <code>client.js.</code> ولا عميل <code>client.js.</code> كمكوّنات مشتركة يمكن إدراجها ضمن كلا المكوّنين. إليك مثالًا:<syntaxhighlight lang="javascript">
// pages/home.server.js

import { Suspense } from 'react'

import Profile from '../components/profile.server'
import Content from '../components/content.client'

export default function Home() {
  return (
    <div>
      <h1>Welcome to React Server Components</h1>
      <Suspense fallback={'Loading...'}>
        <Profile />
      </Suspense>
      <Content />
    </div>
  )
}
</syntaxhighlight>يًصيَّر المكوّنان <code><Home></code> و <code><Profile></code> من قبل الخادم دائمًا ومن ثم ينقلان عبر الأقنية إلى العميل، ولن يُضافا إلى تجميعة الخاصة بالعميل. أما المكوّن <code><Content></code> فسيُرطَّب في جانب العميل كأي مكوّن React نمطي.<blockquote>انتبه إلى استخدام الإدراج والتصدير الافتراضي (باستخدام الكلمة <code>default</code>) لمكوّنات الخادم. إذا لايزال العمل جاريًا على دعم التصدير المُسمىّ.</blockquote>

=== واجهات Next.js البرمجية المدعومة ===
إليك بعض الواجهات البرمجية المدعومة في Next.js

==== الواجهتين <code>next/link</code> و <code>next/image</code> ====
يمكن استخدام شيفرة الواجهتين كالسابق تمامًا وستعاملان كمكوّنات عميل للإبقاء على التفاعلية في جانب العميل.

==== الواجهة <code>next/document</code> ====
لا بد من تحويل شيفرة مكوِّن المستند المخصص <code>document_</code> إلى مكوّن دوال كما سنورد تاليًا لاستخدام مكوّنات الخادم. وإن لم يكن لديك مستند مخصص، ستستخدم Next.js المكوّن الافتراضي <code>document_</code>:<syntaxhighlight lang="javascript">
// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
</syntaxhighlight>

==== الواجهة <code>next/app</code> ====
يشابه استخدام المكوّن <code>app.js_</code> بنفس طريقة استخدام [[Next.js/custom app|المكوّن App المخصص]]، لكن لا يُنصح باستخدام المكوّن المخصص App كمكوّن خادم مثل <code>app.server.js_</code>لكي يتماشى مع مكوّنات app الأخرى التي لا تعمل على جانب الخادم، بل في جانب العميل لأغراض محددة مثل إدراج تنسيقات CSS العامة.

==== التوجّه ====
يُدعم التوجه الأساسي من خلال المسار والاستعلام وكذلك التوجه الديناميكي. وإن أردت الولوج إلى موجه داخل مكوّن خادم، سيتلقى المكوّن نسخة عن الكائن <code>router</code> كخاصية وبهذا يمكنك الولوج مباشرة إلى معلومات الوجهة دون الحاجة إلى استخدام الخطاف <code>()useRouter</code><syntaxhighlight lang="javascript">
// pages/index.server.js

export default function Index({ router }) {
  //وغيره `router.pathname` يمكن الولوج إلى معلومات الوجهة من خلال التابع 
  return 'hello'
}
</syntaxhighlight>

=== واجهات Next.js البرمجية غير المدعومة ===
طالما أن مكوّنات خادم React وأقنية التصيير من جانب الخادم SSR streaming في مرحلة الاختبار فلن تُدعم جميع واجهات Next.js البرمجية. لهذا سنشير إلى بعض الواجهات التي تتمتع بوظائفية محدودة ضمن مكونات الخادم، ولن يتأثر بالطبع استخدام React 18 بمعزل عن أقنية التصيير من جانب الخادم.

==== خطافات React ====
لا تُدعم حاليًا معظم خطافات React مثل <code>useContext</code> و <code>useState</code> و <code>useReducer</code> و <code>useEffect</code> و <code>useLayoutEffect</code> لأنّ مكوّنات الخادم لن تُنفَّذ إلا حين الطلب وهي عديمة الحالة.

==== إحضار البيانات والتنسيقات ====
لا يزال العمل جاريًا على دعم إحضار البيانات وتطبيق التنسيقات ضمن المكوّنات المعلَّقة <code>Suspense</code> في جانب الخادم فهي غير مدعومة جيدًا. ولا تُدعم أيضًا دوال التصدير <code>getInitialProps</code> و <code>getStaticProps</code> و <code>getStaticPaths</code>. 

==== الواجهة <code>next/head</code> والوجهات العالمية I18n ====
لايزال العمل جاريًا لتقديم الدعم اللازم لها.

== تبديل بيئة تشغيل التطبيق (الإصدار الاختباري Alpha) ==
تستخدم Next.js بيئة التشغيل Node.js افتراضيًا لتصيير الصفحات، بما في ذلك التصيير المسبق والتصيير من جانب الخادم. <blockquote>'''ملاحظة''': يؤثر الخيار <code>runtime</code> في الصفحات فقط ولا يؤثر في الأداة الوسطية</blockquote>لكن عند تثبيت [[Next.js/react-18|React 18]]، يمكنك اختبار ميزة تجريبية جديدة تسمح لك بتبديل بيئة تشغيل الصفحة بين Node.js و [[Next.js/edge runtime|Edge Runtime]]، وستؤثر هذه العملية بالطبع على أقنية نقل البيانات المصيرة في الخادم ومكوّنات الخادم.

=== خيار التشغيل العام ===
بإمكانك ضبط قيمة الخيار التجريبي في ملف التهيئة <code>next.config.js</code> ليأخذ أحد القيمتين <code>'nodejs'</code> أو <code>'edge'</code>:<syntaxhighlight lang="javascript">
// next.config.js
module.exports = {
  experimental: {
    runtime: 'nodejs',
  },
}
</syntaxhighlight>يحدد هذا الخيار أي من بيئتي التشغيل سيجري اعتمادها لتصيير الصفحات جميعها في زمن التشغيل. 

=== خيار تحديد بيئة تشغيل لكل صفحة ===
يمكن لأي صفحة تصدير إعداد بيئة التشغيل <code>runtime</code> الخاصة بها لتكون <code>'nodejs'</code> أو <code>'edge'</code>:<syntaxhighlight lang="javascript">
export const config = {
  runtime: 'nodejs',
}
</syntaxhighlight>ستلغي إعدادات التشغيل الخاصة بالصفحات -إن وجدت- خيار بيئة التشغيل العام التي ستستخدم افتراضيًا في حال عدم وجود إعدادات تشغيل مخصصة للصفحة.

'''ملاحظة''': لا تدعم [[Next.js/api routes|وجهات API]] حاليًا خيار تحديد بيئة تشغيل الصفحات. 

== المصادر ==

* صفحات React 18 من توثيق Next.js الرسمي.