React بلا خوادم مع Next.js: دليل المبتدئين للنشر والتوسع

Majd Muhtaseb09‏/07‏/202512 دقيقة

React بلا خوادم مع Next.js: دليل المبتدئين للنشر والتوسع

مقدمة

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

إعداد مشروع Next.js الخاص بك

أولاً، تأكد من تثبيت Node.js. ثم، قم بإنشاء مشروع Next.js جديد:

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

إنشاء مسار API بسيط

يبسط Next.js إنشاء مسارات API. قم بإنشاء ملف باسم pages/api/hello.js مع الكود التالي:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'Hello, world!' })
}

سيعيد مسار API البسيط هذا استجابة JSON عند الوصول إليه.

النشر مع Vercel

Vercel هي منصة شائعة لنشر تطبيقات Next.js بدون خوادم. يوفر تكاملًا سلسًا وتوسيعًا تلقائيًا.

إنشاء حساب Vercel: قم بالتسجيل للحصول على حساب مجاني على vercel.com.
تثبيت Vercel CLI:
```
npm install -g vercel
```
النشر: انتقل إلى دليل المشروع الخاص بك وقم بتشغيل:
```
vercel
```
اتبع التعليمات لربط مشروعك ونشره. ستقوم Vercel تلقائيًا ببناء ونشر تطبيق Next.js الخاص بك في بيئة بلا خوادم.

اعتبارات التوسع

التوسع التلقائي: تتوسع الوظائف بلا خوادم تلقائيًا بناءً على حركة المرور، مما يضمن قدرة تطبيقك على التعامل مع الارتفاعات المفاجئة في الطلب.
تخزين CDN المؤقت: تستخدم Vercel شبكة CDN عالمية لتخزين الأصول الثابتة واستجابات API مؤقتًا، مما يزيد من تحسين الأداء.
تحسين قاعدة البيانات: بالنسبة للتطبيقات التي تعتمد على البيانات بشكل كبير، قم بتحسين استعلامات قاعدة البيانات الخاصة بك وفكر في استخدام قاعدة بيانات بلا خوادم مثل FaunaDB أو PlanetScale.

مثال: جلب البيانات على جانب الخادم

فيما يلي مثال لجلب البيانات على جانب الخادم باستخدام getStaticProps في pages/index.js:

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  const data = await res.json()

  return {
    props: {
      data,
    },
  }
}

export default function Home({ data }) {
  return (
    <div>
      <h1>Todo:</h1>
      <p>{data.title}</p>
    </div>
  )
}

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

خاتمة

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