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

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

المؤلفMajd Muhtaseb02‏/05‏/20258 دقيقة
React بدون خادم مع Next.js: دليل المبتدئين

مقدمة

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

ما هو مفهوم بدون خادم؟

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

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

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

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

إنشاء صفحة بسيطة

استبدل محتوى pages/index.js بما يلي:

function HomePage() {
  return (
    <div>
      <h1>مرحبًا بك في تطبيق React الخاص بي بدون خادم!</h1>
      <p>هذه صفحة Next.js بسيطة تم نشرها كوظيفة بدون خادم.</p>
    </div>
  );
}

export default HomePage;

إضافة مسار API

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

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

يقوم مسار API هذا بإرجاع استجابة JSON. يمكنك الوصول إليه عن طريق الانتقال إلى /api/hello في متصفحك.

النشر على Vercel

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

  1. إنشاء حساب Vercel: سجل في vercel.com.

  2. تثبيت Vercel CLI:

    npm install -g vercel

  3. نشر التطبيق الخاص بك: قم بتشغيل الأمر التالي في دليل المشروع الخاص بك:

    vercel

سيرشدك Vercel خلال عملية النشر. سيكون تطبيقك مباشرًا على عنوان URL فريد لـ Vercel.

النشر على Netlify

Netlify هي منصة ممتازة أخرى لعمليات النشر بدون خادم.

  1. إنشاء حساب Netlify: سجل في netlify.com.

  2. تثبيت Netlify CLI:

    npm install -g netlify-cli

  3. بناء مشروعك:

    npm run build

  4. نشر التطبيق الخاص بك:

    netlify deploy --prod

سيرشدك Netlify أيضًا خلال العملية. ستحتاج إلى تحديد الدليل dist أو out (اعتمادًا على تكوين Next.js الخاص بك) كدليل النشر.

خاتمة

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