0Pricing
Next.js 15 Fullstack Web Apps · Pelajaran

Formulir Fullstack dengan Server Actions

Manfaatkan Server Actions untuk menangani pengiriman formulir secara langsung di server sehingga perubahan data menjadi lebih sederhana.

Formulir Fullstack dengan Server Actions adalah pelajaran Next.js 15 Fullstack Web Apps gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack Web Apps, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Formulir Fullstack dengan Server Actions” gratis?

Ya — teks lengkap “Formulir Fullstack dengan Server Actions” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack Web Apps, upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Formulir Fullstack dengan Server Actions”?

Manfaatkan Server Actions untuk menangani pengiriman formulir secara langsung di server sehingga perubahan data menjadi lebih sederhana. Kamu berlatih Next.js 15 Fullstack Web Apps dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack Web Apps?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack Web Apps di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Formulir Fullstack dengan Server Actions” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack Web Apps ini?

Ya. Setiap pelajaran Next.js 15 Fullstack Web Apps menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Komponen Terkontrol dan State
  2. Validasi Formulir dengan React Hook Form
  3. Formulir Fullstack dengan Server Actions
  4. Unggah File dan Penanganan Form Multipart
← Kembali ke Next.js 15 Fullstack Web Apps