Next.js مقابل React؟ إنها شراكة وليست مسابقة

لا يوجد نقص في مكتبات وأطر JavaScript لمطوري الويب الحديثين. تعد React واحدة من أكثر المكتبات انتشارًا ، والتي أنشأها Facebook (الآن Meta) للمساعدة في إنشاء تطبيقات غنية بالميزات. تعمل تطبيقات React بشكل تقليدي في متصفحات الويب ، لكن إطار عمل Next.js يوسع وظائف React إلى جانب الخادم من خلال بيئة وقت تشغيل JavaScript Node.js.

في هذه المقالة ، سنلقي نظرة على Next.js و React حتى تتمكن من تحديد ما إذا كانا مناسبين لمشروعك التالي.

Next.js و React: JavaScript في المستوى التالي

وجد استطلاع 2022 SlashData أن هناك أكثر من 17 مليون مبرمج JavaScript حول العالم ، يقودون حزمة تتضمن لغات شائعة مثل Python و Java. يمكن استخدام JavaScript على جانبي العميل والخادم ، وهذا التنوع يعني أن المطورين يمكنهم إنشاء تطبيقات كاملة باستخدام لغة برمجة واحدة.

أدى إدخال مكتبات JavaScript مثل React وأطر عمل مثل Next.js إلى تعزيز هذا التطور. توفر هذه المكتبات والأطر ميزات تعمل على تبسيط تكامل الواجهة الأمامية والخلفية. علاوة على ذلك ، يمكن للمطورين توسيع قدرات JavaScript باستخدام مديري الحزم مثل npm (مدير الحزم Node.js) لتثبيت مكتبات وأدوات JavaScript. توفر هذه الموارد ميزات متطورة تقلل من مقدار التعليمات البرمجية التي يجب عليك كتابتها بنفسك.

تعني قابلية امتداد JavaScript أن المعرفة الشاملة بأدواتها الأكثر شيوعًا هي مفتاح نجاحك كمطور ويب.

ما هو Next.js؟

تم إصدار Next.js في البداية عام 2016 بواسطة Vercel ، وهو إطار عمل React مفتوح المصدر يوفر اللبنات الأساسية لإنشاء تطبيقات ويب عالية الأداء. تبنته الشركات الكبرى منذ ذلك الحين ، بما في ذلك Twitch و TikTok و Uber ، على سبيل المثال لا الحصر.

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

• قدرات العرض الهجين
• تقسيم تلقائي للكود
• تحسين الصورة
• دعم مضمن لمعالجات CSS الأولية ومكتبات CSS-in-JS
• التوجيه المدمج

تساعد هذه الميزات مطوري Next.js على توفير وقت كبير في التكوين والأدوات. يمكنك الانتقال مباشرة إلى إنشاء تطبيقك ، والذي قد يدعم مشاريع مثل ما يلي:

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

ما هو رياكت؟

React هي مكتبة JavaScript تستخدم لبناء واجهات مستخدم ديناميكية. بالإضافة إلى إنشاء واجهات ويب ، يمكنك إنشاء تطبيقات جوال باستخدام React Native.

تتضمن بعض فوائد استخدام React ما يلي:

• أداء مُحسَّن: بدلاً من تحديث كل مكون في DOM ، تستخدم React DOM الظاهري لتحديث المكونات المتغيرة فقط.
• مبني على مكونات ثقيلة: بمجرد إنشاء مكون ، يمكنك إعادة استخدامه بشكل متكرر.
• تصحيح الأخطاء بسهولة: تستخدم تطبيقات React تدفق بيانات أحادي الاتجاه - من المكونات الأصل إلى المكونات الفرعية فقط.

Next.js مقابل React

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

سهولة الاستعمال

من السهل البدء بـ Next.js و React. يتطلب كل منها تشغيل أوامر فردية في الجهاز الطرفي باستخدام npx ، وهو جزء من npm لـ Node.js.

بالنسبة إلى Next.js ، فإن أبسط أمر هو:

 npx create-next-app

مع عدم وجود وسيطات إضافية لـ create-next-app ، سيستمر التثبيت في الوضع التفاعلي. سيُطلب منك اسم مشروع (والذي سيُستخدم في دليل المشروع) ، وما إذا كنت تريد تضمين دعم TypeScript وكود linter ESLint.

سيبدو شيئا من هذا القبيل:

عند تهيئة مثيل React ، فإن أبسط أمر يتضمن اسمًا لمجلد المشروع:

 npx create-react-app new-app

يؤدي هذا إلى إنشاء مجلد يحتوي على جميع التكوينات والتبعيات الأولية الضرورية:

بينما يسهّل كلاهما البدء ، تذكر أن Next.js مبني على React. لذلك ، لا يمكنك تعلم Next.js دون تعلم React أولاً وفهم كيفية عملها. لحسن الحظ ، تتميز React بمنحنى تعليمي لطيف وهي رائعة للمبتدئين.

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

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

Next.js وميزات React

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

جلب البيانات

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

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

يمكن أن يشير العرض المسبق إلى إنشاء موقع ثابت (SSG) أو عرض من جانب الخادم (SSR). في SSG ، يتم إنشاء صفحات HTML في وقت الإنشاء وإعادة استخدامها لطلبات متعددة. يمكن لـ Next.js إنشاء صفحات HTML ببيانات أو بدونها.

فيما يلي مثال على كيفية إنشاء Next.js لصفحات بدون بيانات:

 function App() { return <div>Welcome</div> } export default App

بالنسبة للصفحات الثابتة التي تستهلك بيانات خارجية ، استخدم الدالة getStaticProps() . بمجرد تصدير getStaticProps() من الصفحة ، سيعرض Next.js الصفحة مسبقًا باستخدام العناصر التي ترجعها. تعمل هذه الوظيفة دائمًا على الخادم ، لذا استخدم getStaticProps() عندما تكون البيانات التي تستخدمها الصفحة متاحة في وقت الإنشاء. على سبيل المثال ، يمكنك استخدامه لجلب مشاركات المدونة من CMS.

 const Posts= ({ posts }) => { return ( <div className={styles.container}> {posts.map((post, index) => ( // render each post ))} </div> ); }; export const getStaticProps = async () => { const posts = getAllPosts(); return { props: { posts }, }; };

في المواقف التي تعتمد فيها مسارات الصفحات على البيانات الخارجية ، استخدم الدالة getStaticPaths() . لذلك ، لإنشاء مسار بناءً على معرف المنشور ، قم بتصدير getStaticPaths() من الصفحة.

على سبيل المثال ، يمكنك تصدير getStaticPaths() من pages / posts / [id] .js كما هو موضح أدناه.

 export getStaticPaths = async() => { // Get all the posts const posts = await getAllPosts() // Get the paths you want to pre-render based on posts const paths = posts.map((post) => ({ params: { id: post.id }, })) return { paths, fallback: false } }

غالبًا ما يتم إقران getStaticPaths getStaticPaths() ) مع getStaticProps() . في هذا المثال ، يمكنك استخدام getStaticProps() لجلب تفاصيل المعرف في المسار.

 export const getStaticProps = async ({ params }) => { const post = await getSinglePost(params.id); return { props: { post } }; };

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

على سبيل المثال ، يمكنك استخدامه لجلب البيانات من واجهة برمجة تطبيقات الأخبار.

 const News = ({ data }) => { return ( // render data ); }; export async function getServerSideProps() { const res = await fetch(`https://app-url/data`) const data = await res.json() return { props: { data } } }

يتم جلب البيانات في كل طلب وتمريرها إلى مكون الأخبار عبر الدعائم.

تقسيم الكود

تقسيم الكود هو تقسيم الكود إلى أجزاء يمكن للمتصفح تحميلها عند الطلب. إنه يقلل من مقدار الكود الذي يتم إرساله إلى المتصفح أثناء التحميل الأولي ، حيث يرسل الخادم ما يحتاجه المستخدم فقط. تدعم الحزم مثل Webpack و Rollup و Browserify تقسيم الشفرة في React.

يدعم Next.js تقسيم الشفرة خارج الصندوق.

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

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

 const DynamicHero = dynamic(() => import('../components/Hero'), { suspense: true, }) export default function Home() { return ( <Suspense fallback={`Loading...`}> <DynamicHero /> </Suspense> ) }

بدلاً من ذلك ، سيتم عرض العنصر الاحتياطي للتعليق قبل تحميل المكون البطل.

دعم API في Next.js مقابل React

تتيح لك ميزة توجيه Next.js API كتابة التعليمات البرمجية للواجهة الخلفية والواجهة الأمامية في نفس مصدر الشفرة. يتم تعيين أي صفحة محفوظة في المجلد / pages / api / إلى المسار / api / * ، ويعاملها Next.js كنقطة نهاية لواجهة برمجة التطبيقات.

على سبيل المثال ، يمكنك إنشاء مسار واجهة برمجة تطبيقات pages / api / user.js يعرض اسم المستخدم الحالي كما يلي:

 export default function user(req, res) { res.status(200).json({ username: 'Jane' }); }

إذا قمت بزيارة https: // app-url / api / عنوان URL للمستخدم ، فسترى كائن اسم المستخدم.

 { username: 'Jane' }

تكون مسارات API مفيدة عندما تريد إخفاء عنوان URL للخدمة التي تصل إليها أو تريد الاحتفاظ بمتغيرات البيئة سراً دون تشفير تطبيق الواجهة الخلفية بالكامل.

أداء

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

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

يوفر Next.js أيضًا تحسينات الخط والجلب المسبق الذكي للمسار وتحسينات التجميع. لا تتوفر هذه التحسينات تلقائيًا في React.

يدعم

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

يتميز Next.js أيضًا بتوثيق ممتاز مع أمثلة شاملة يسهل فهمها. على الرغم من شعبيتها ، فإن توثيق React ليس قابلاً للملاحة.

ملخص

يأتي اختيار Next.js أو React وفقًا لمتطلبات التطبيق.

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

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

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

هل تخطط لتطبيقك الذي يهيمن على العالم؟ تعمق في نهج Kinsta لاستضافة تطبيق Node.js للخدمات التي تدعم React و Next.js.