العودة للمقالات

React بلا خوادم مع Next.js: الدليل النهائي

Majd Muhtaseb28‏/04‏/202510 دقيقة

مقدمة

أحدث Next.js ثورة في تطوير React من خلال تقديم إطار عمل قوي لبناء تطبيقات يتم عرضها من جانب الخادم (server-rendered)، وتوليدها بشكل ثابت (statically generated)، وتطبيقات تعتمد على واجهات برمجة التطبيقات (API-driven). تتيح لك إمكانات Next.js "بلا خوادم" نشر تطبيقات React الخاصة بك على منصات مثل Vercel و Netlify و AWS Lambda، مما يقلل من عبء إدارة البنية التحتية وتكاليف التوسع.

لماذا "بلا خوادم" مع Next.js؟

• أداء محسّن: يعمل العرض من جانب الخادم (SSR) وتوليد المواقع الثابتة (SSG) على تحسين أوقات التحميل الأولية وتحسين محركات البحث (SEO).
• قابلية التوسع: تتوسع وظائف "بلا خوادم" تلقائيًا بناءً على الطلب.
• تقليل التكاليف: ادفع فقط مقابل ما تستخدمه، مما يلغي تكاليف الخادم الخامل.
• نشر مبسط: سهولة النشر على مختلف المنصات "بلا خوادم".

الميزات الرئيسية لـ Next.js لـ "بلا خوادم"

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

البدء: مثال بسيط

لنقم بإنشاء تطبيق Next.js بسيط ونشره على منصة "بلا خوادم".

1. إنشاء مشروع Next.js:

   npx create-next-app@latest my-serverless-app
   cd my-serverless-app
   

2. إنشاء مسار API:

   قم بإنشاء ملف pages/api/hello.js بالتعليمات البرمجية التالية:

   export default function handler(req, res) {
     res.status(200).json({ name: 'Hello, Serverless!' })
   }
   

3. تعديل صفحة index.js:

   قم بتحديث pages/index.js لاستدعاء مسار API:

   import { useEffect, useState } from 'react';
   
   export default function Home() {
     const [message, setMessage] = useState('Loading...');
   
     useEffect(() => {
       const fetchData = async () => {
         const res = await fetch('/api/hello');
         const data = await res.json();
         setMessage(data.name);
       };
   
       fetchData();
     }, []);
   
     return (
       <div>
         <h1>{message}</h1>
       </div>
     );
   }
   

4. النشر إلى Vercel:

   أسهل طريقة لنشر تطبيق Next.js "بلا خوادم" هي استخدام Vercel.

   • أنشئ حساب Vercel وقم بتثبيت Vercel CLI:

     npm install -g vercel
     

   • انشر تطبيقك:

     vercel
     

الخلاصة

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