Next.js 15 Fullstack Web Apps · درس

نماذج Fullstack باستخدام إجراءات الخادم

استخدم إجراءات الخادم لمعالجة إرسال النماذج مباشرةً على الخادم، مما يبسّط عمليات تغيير البيانات.

الدرس 3 من 411 خطوة

نماذج Fullstack باستخدام إجراءات الخادم درس مجاني في Next.js 15 Fullstack Web Apps على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Next.js 15 Fullstack Web Apps، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Next.js 15 Fullstack Web Apps 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

What are Server Actions?

Server Actions in Next.js 15 allow you to run server-side code directly from your React components. They are a powerful feature that simplifies data mutations and backend interactions.

Think of them as tiny, direct connections to your server logic, without needing to create separate API routes for every backend task.

Forms and Server Actions

One of the primary uses for Server Actions is handling form submissions. When you link an HTML <form> element to a Server Action, the browser automatically sends the form data to your server-side function.

The action attribute of the <form> points directly to your Server Action function.
This eliminates the need for client-side JavaScript to capture and send form data, making forms simpler and more robust.

Defining Your First Action

A Server Action is simply an asynchronous JavaScript function marked with the "use server" directive. This directive tells Next.js that the function should be executed on the server.

You can define Server Actions directly within your React components (if they are Server Components) or in separate files for better organization.

Basic Server Action Example

Let's create a simple form that takes a username. When submitted, a Server Action will log the username on the server. Notice the "use server" at the top of the function.

// app/page.js

// This async function is our Server Action
async function processUsername(formData) {
  "use server"; // Marks this function to run on the server
  const username = formData.get('username'); // Get value by input's 'name' attribute
  console.log('Server received username:', username);
  // In a real application, you'd typically save this to a database
}

export default function HomePage() {
  return (
    <div>
      <h1>Enter Your Username</h1>
      <form action={processUsername}> {/* Link form to the Server Action */}
        <input type="text" name="username" placeholder="Your username" required />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Accessing Form Data

When a form is submitted to a Server Action, the action receives a FormData object as its first argument. This object is a standard web API that contains all the key-value pairs from your form's input fields.

Use formData.get('fieldName') to retrieve the value of a specific input.
The 'fieldName' must match the name attribute of your HTML input element (e.g., <input name="username" />).

Redirecting After Submission

After a user successfully submits a form and your Server Action processes the data (e.g., saves it to a database), you often want to redirect them to another page, such as a confirmation or a list view.

Next.js provides a redirect function from next/navigation that you can call directly within your Server Action to navigate the user to a new route.

Action with Redirect Example

Let's enhance our form to redirect the user after a successful submission. Here, we'll redirect to a /success-page.

// app/page.js
import { redirect } from 'next/navigation'; // Import the redirect function

async function handleSubmit(formData) {
  "use server";
  const username = formData.get('username');
  console.log('Processing username:', username);

  // In a real app, you'd do database operations here

  // After successful processing, redirect the user
  redirect('/success-page'); 
}

export default function SignupPage() {
  return (
    <div>
      <h1>Sign Up</h1>
      <form action={handleSubmit}>
        <input type="text" name="username" placeholder="Username" required />
        <button type="submit">Register</button>
      </form>
    </div>
  );
}

// Note: For this example to fully work, you would need an actual
// app/success-page/page.js file with some content.

Basic Error Handling

Server Actions can encounter errors, such as invalid input or database issues. You can use standard JavaScript try...catch blocks within your action to gracefully handle these potential problems.

For more advanced error feedback to the user, you might return data from the action to the client component or use a specialized form library.

Updating UI with Revalidation

After a Server Action successfully mutates data (e.g., adding a new post), your user interface might need to update to reflect this change. Next.js provides functions like revalidatePath or revalidateTag from next/cache.

These functions tell Next.js to re-fetch and re-render data for a specific path or a cached data tag, ensuring your users always see the latest information without a full page refresh.

Server Action Question

Consider the following Server Action and form in a Next.js App Router application:

// app/add-task/page.js
import { redirect } from 'next/navigation';

async function createTask(formData) {
  "use server";
  const taskTitle = formData.get('title');

  if (taskTitle.length < 5) {
    throw new Error('Task title must be at least 5 characters long.');
  }

  console.log('Creating task:', taskTitle);
  // Simulate saving to database
  redirect('/tasks');
}

export default function AddTaskPage() {
  return (
    <form action={createTask}>
      <input type="text" name="title" placeholder="Task Title" />
      <button type="submit">Add Task</button>
    </form>
  );
}

أجب عليها في الدرس التفاعلي

Recap: Fullstack Forms

You've mastered how Server Actions simplify fullstack form handling in Next.js 15!

Server Actions (`"use server"`) execute code directly on the server.
HTML <form action={yourAction}> automatically sends FormData to your action.
Access form fields using formData.get('name').
Use redirect from next/navigation for post-submission navigation.
Implement error handling with try...catch within your actions.
Consider revalidatePath or revalidateTag to update UI after data mutations.

This pattern reduces boilerplate and streamlines your data mutation workflows.

البدء مجانًا

تعلم TypeScript مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 12
الدروس: 48

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «نماذج Fullstack باستخدام إجراءات الخادم» مجاني؟

نعم — نص درس «نماذج Fullstack باستخدام إجراءات الخادم» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Next.js 15 Fullstack Web Apps، انتقل إلى CoddyKit PRO. تتضمن دورة Next.js 15 Fullstack Web Apps 4 دروس في المجموع.

ماذا ستتعلم في «نماذج Fullstack باستخدام إجراءات الخادم»؟

استخدم إجراءات الخادم لمعالجة إرسال النماذج مباشرةً على الخادم، مما يبسّط عمليات تغيير البيانات. تتمرن على Next.js 15 Fullstack Web Apps مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Next.js 15 Fullstack Web Apps؟

لا تُشترط خبرة سابقة. Next.js 15 Fullstack Web Apps على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «نماذج Fullstack باستخدام إجراءات الخادم»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Next.js 15 Fullstack Web Apps هذا؟

نعم. كل درس في Next.js 15 Fullstack Web Apps يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

المكونات المتحكم بها والحالة
التحقق من صحة النماذج باستخدام React Hook Form
نماذج Fullstack باستخدام إجراءات الخادم
رفع الملفات ومعالجة النماذج متعددة الأجزاء

← العودة إلى Next.js 15 Fullstack Web Apps