ملخص: إجراءات الخادم
جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 33 من 47.
التحدي
متوسطملخص الفصل: سجل الزوار أدناه لا يحفظ أي شيء ولا يتحدث أبداً. أنشئ التدفق بالكامل: النموذج ← الإجراء (action) ← الصفحة المحدثة.
- في
app/actions.js، قم بتمييز الملف بـ'use server'كـ سطر أول، وبعد الحفظ قم باستدعاءrevalidatePath('/')(المستوردة من'next/cache'). - في
app/page.jsx، قم باستيرادaddGuestمن'./actions'وغلف عنصر الإدخال والزر داخل<form>يحتوي علىid="guest-form"وaction={addGuest}. - أعطِ عنصر الإدخال
name="name": هذا هو الـ key الذي يقرأه الإجراء عبرformData.get('name').
جرّب بنفسك
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}جميع دروس أساسيات Next.js
4الخادم والعميل (Server & Client)
نوعان من المكوناتقراءة الخطأسطر 'use client'الحفاظ على أجزاء العميل صغيرةخادم داخل عميلملخص: الخادم والعميل2التوجيه والروابط
المجلدات هي مسارات التوجيهالمسارات المتداخلةربط الصفحاتالمسارات الديناميكيةصفحات غير موجودةملخص: التوجيه
3التخطيطات والبيانات الوصفية
التخطيط الرئيسيالتنقل المشتركالتخطيطات المتداخلةالبيانات الوصفية للصفحةالبيانات الوصفية الديناميكيةملخص: التخطيطات6إجراءات الخادم (Server Actions)
ما هو إجراء الخادم (Server Action)؟نماذج تعمل وتتفاعلقراءة بيانات النموذجتحديث الصفحةملخص: إجراءات الخادم