Aplikasi Web Fullstack Next.js 15 · Pelajaran

Borang Timbunan Penuh dengan Tindakan Pelayan

Gunakan Tindakan Pelayan untuk mengendalikan penghantaran borang secara terus pada pelayan, sekali gus memudahkan perubahan data.

Pelajaran 3 daripada 411 langkah

Borang Timbunan Penuh dengan Tindakan Pelayan ialah pelajaran Aplikasi Web Fullstack Next.js 15 percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Aplikasi Web Fullstack Next.js 15, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Apakah Server Actions?

Server Actions dalam Next.js 15 membolehkan anda menjalankan kod pada pelayan terus daripada komponen React. Ciri ini berkuasa dan memudahkan perubahan data serta interaksi bahagian belakang.

Anggaplah ia sebagai sambungan kecil dan terus kepada logik pelayan anda, tanpa perlu mencipta laluan API berasingan untuk setiap tugasan bahagian belakang.

Borang dan Server Actions

Salah satu kegunaan utama Server Actions ialah mengendalikan penghantaran borang. Apabila anda memautkan elemen HTML <form> kepada Server Action, pelayar akan menghantar data borang secara automatik kepada fungsi pada pelayan.

Atribut action bagi <form> menunjuk terus kepada fungsi Server Action anda.
Hal ini menghapuskan keperluan JavaScript pada klien untuk menangkap dan menghantar data borang, lalu menjadikan borang lebih ringkas dan kukuh.

Mentakrifkan Action Pertama Anda

Server Action hanyalah fungsi JavaScript tak segerak yang ditandai dengan arahan "use server". Arahan ini memberitahu Next.js bahawa fungsi tersebut hendaklah dilaksanakan pada pelayan.

Anda boleh mentakrifkan Server Actions terus dalam komponen React anda (jika komponen tersebut ialah Komponen Pelayan) atau dalam fail berasingan untuk penyusunan yang lebih baik.

Contoh Asas Server Action

Mari cipta borang ringkas yang menerima nama pengguna. Apabila dihantar, Server Action akan merekodkan nama pengguna pada pelayan. Perhatikan "use server" di bahagian atas fungsi.

// 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>
  );
}

Mengakses Data Borang

Apabila borang dihantar kepada Server Action, action menerima objek FormData sebagai argumen pertamanya. Objek ini ialah API web standard yang mengandungi semua pasangan kunci-nilai daripada medan input borang anda.

Gunakan formData.get('fieldName') untuk mendapatkan nilai input tertentu.
'fieldName' mestilah sepadan dengan atribut name bagi elemen input HTML anda (contohnya, <input name="username" />).

Mengubah Hala Selepas Penghantaran

Selepas pengguna berjaya menghantar borang dan Server Action anda memproses data tersebut (contohnya, menyimpannya dalam pangkalan data), anda biasanya mahu mengubah hala pengguna ke halaman lain, seperti halaman pengesahan atau paparan senarai.

Next.js menyediakan fungsi redirect daripada next/navigation yang boleh anda panggil terus dalam Server Action untuk membawa pengguna ke laluan baharu.

Contoh Action dengan Ubah Hala

Mari tingkatkan borang kita supaya pengguna diubah hala selepas penghantaran berjaya. Dalam contoh ini, kita akan mengubah hala ke /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.

Pengendalian Ralat Asas

Server Actions boleh mengalami ralat, seperti input tidak sah atau masalah pangkalan data. Anda boleh menggunakan blok try...catch JavaScript standard dalam action anda untuk mengendalikan masalah yang mungkin berlaku ini dengan baik.

Untuk maklum balas ralat yang lebih terperinci kepada pengguna, anda boleh mengembalikan data daripada action kepada komponen klien atau menggunakan pustaka borang khusus.

Mengemas Kini UI dengan Pengesahan Semula

Selepas Server Action berjaya mengubah data (contohnya, menambah kiriman baharu), antara muka pengguna anda mungkin perlu dikemas kini untuk mencerminkan perubahan tersebut. Next.js menyediakan fungsi seperti revalidatePath atau revalidateTag daripada next/cache.

Fungsi ini memberitahu Next.js supaya mendapatkan semula dan memaparkan semula data bagi laluan tertentu atau tag data yang dicache, supaya pengguna anda sentiasa melihat maklumat terkini tanpa memuat semula halaman sepenuhnya.

Soalan tentang Server Action

Teliti Server Action dan borang berikut dalam aplikasi Penghala Aplikasi Next.js:

// 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>
  );
}

Jawab dalam pelajaran interaktif

Imbas Kembali: Borang Tindanan Penuh

Anda telah menguasai cara Server Actions memudahkan pengendalian borang tindanan penuh dalam Next.js 15!

Server Actions (`"use server"`) melaksanakan kod terus pada pelayan.
HTML <form action={yourAction}> menghantar FormData kepada action anda secara automatik.
Akses medan borang menggunakan formData.get('name').
Gunakan redirect daripada next/navigation untuk navigasi selepas penghantaran.
Laksanakan pengendalian ralat dengan try...catch dalam action anda.
Pertimbangkan revalidatePath atau revalidateTag untuk mengemas kini UI selepas perubahan data.

Corak ini mengurangkan kod berlebihan dan melancarkan aliran kerja perubahan data anda.

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Borang Timbunan Penuh dengan Tindakan Pelayan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Aplikasi Web Fullstack Next.js 15, termasuk “Borang Timbunan Penuh dengan Tindakan Pelayan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Aplikasi Web Fullstack Next.js 15 merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Borang Timbunan Penuh dengan Tindakan Pelayan”?

Gunakan Tindakan Pelayan untuk mengendalikan penghantaran borang secara terus pada pelayan, sekali gus memudahkan perubahan data. Anda berlatih Aplikasi Web Fullstack Next.js 15 menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Aplikasi Web Fullstack Next.js 15?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Aplikasi Web Fullstack Next.js 15 di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Borang Timbunan Penuh dengan Tindakan Pelayan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Aplikasi Web Fullstack Next.js 15 ini?

Ya. Setiap pelajaran Aplikasi Web Fullstack Next.js 15 menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Komponen Terkawal dan Keadaan
Pengesahan Borang dengan React Hook Form
Borang Timbunan Penuh dengan Tindakan Pelayan
Muat Naik Fail dan Pengendalian Borang Multipart

← Kembali ke Aplikasi Web Fullstack Next.js 15