แบบฟอร์มฟูลสแตกด้วยการดำเนินการเซิร์ฟเวอร์

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.

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.

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.

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.

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" />).

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.

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

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.

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.

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

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.