تطبيق رياكت بدون خادم مع Next.js و AWS Amplify: دليل عملي
مقدمة
يهدف هذا الدليل إلى إرشادك خلال عملية إنشاء ونشر تطبيق رياكت بدون خادم باستخدام 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 للحصول على المزيد من الميزات والتخصيصات المتقدمة.