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

تطبيق رياكت بدون خادم مع Next.js و AWS Amplify: دليل عملي

Majd Muhtaseb23‏/05‏/202512 دقيقة

مقدمة

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

المتطلبات الأساسية

• تثبيت Node.js و npm
• حساب AWS

الخطوة 1: إنشاء تطبيق Next.js

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

الخطوة 2: تهيئة Amplify

npm install -g @aws-amplify/cli
amplify configure # اتبع التعليمات لتكوين حساب AWS الخاص بك
amplify init

اختر الإعدادات التالية:

• اسم المشروع: my-serverless-app
• اسم البيئة: dev
• اختر المحرر الافتراضي الخاص بك: (تفضيلك)
• نوع التطبيق: javascript
• الإطار: react
• مسار دليل المصدر: .
• مسار دليل التوزيع: .next
• أمر البناء: npm run-script build
• أمر البدء: npm run-script start
• هل ترغب في تعديل الواجهة الخلفية AWS؟ N

الخطوة 3: إضافة استضافة Amplify

amplify add hosting

اختر الإعدادات التالية:

• حدد إعداد البيئة: DEV (S3 only with HTTP) أو PROD (CloudFront CDN with S3 origin) - اختر DEV للمشاريع البسيطة، و PROD للحصول على أفضل أداء.
• اسم حاوية الاستضافة: (اختر اسمًا فريدًا)
• مستند الفهرس لتطبيقك: index.html
• مستند الخطأ لتطبيقك: 404.html

الخطوة 4: النشر

amplify publish

يقوم هذا الأمر ببناء تطبيق Next.js الخاص بك ونشره على AWS Amplify. سيوفر لك Amplify عنوان URL للوصول إلى تطبيقك المباشر.

الخطوة 5: إضافة API (اختياري)

إذا كنت بحاجة إلى API، يمكنك إضافة وظيفة AWS Lambda باستخدام Amplify.

amplify add api

اتبع التعليمات لتكوين API الخاص بك. على سبيل المثال، يمكنك إنشاء REST API مع وظيفة Lambda التي تُرجع استجابة JSON بسيطة.

// مثال على وظيفة Lambda (./amplify/backend/function/<your_function_name>/src/index.js)
exports.handler = async (event) => {
  const response = {
    statusCode: 200,
    body: JSON.stringify('مرحبا من Lambda!'),
  };
  return response;
};

ثم قم بتحديث تطبيق Next.js الخاص بك لاستدعاء API. ستحتاج إلى حزمة aws-amplify.

npm install aws-amplify @aws-amplify/ui-react

// مثال على مكون Next.js
import { API } from 'aws-amplify';
import { useEffect, useState } from 'react';

function MyComponent() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    async function fetchData() {
      const data = await API.get('<your_api_name>', '/items'); // استبدل '/items' بمسار API الخاص بك
      setMessage(data);
    }
    fetchData();
  }, []);

  return (
    <div>
      <p>رسالة من API: {JSON.stringify(message)}</p>
    </div>
  );
}

export default MyComponent;

تذكر تكوين Amplify في ملف _app.js الخاص بك:

// _app.js
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import '@aws-amplify/ui-react/styles.css'; //تنسيق اختياري

Amplify.configure(awsconfig);

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

ثم تحتاج إلى إضافة الملف الذي تم إنشاؤه تلقائيًا aws-exports.js إلى جذر المشروع

amplify push

خاتمة

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