CRUD dengan Server Actions
Lakukan operasi Create, Read, Update, dan Delete (CRUD) pada basis data Anda menggunakan Server Actions.
CRUD dengan Server Actions adalah pelajaran Next.js 15 Fullstack (App Router + Server Actions) gratis di CoddyKit. Ini adalah pelajaran 2 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 (App Router + Server Actions), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
CRUD: Database Actions Made Easy
Welcome to CRUD operations with Next.js Server Actions! CRUD stands for Create, Read, Update, and Delete. These are the four fundamental operations for interacting with any database.
Server Actions provide a powerful way to perform these operations directly on the server, keeping your client-side bundle small and improving security.
Recap: Prisma & Server Actions
In the previous lesson, we set up Prisma. We'll use Prisma Client to interact with our database. Remember, Server Actions are asynchronous functions that run on the server.
They can be defined directly in a component or in a separate actions.js file. We'll use a simple Post model for our examples.
Create: Adding New Data
Let's start with Create. This involves adding a new record to your database. We'll create a simple form that uses a Server Action to add a new post.
Notice how the form's action attribute directly calls our server function. This avoids client-side JavaScript for form submission.
Create: Code Example
Here's how to create a new post using a Server Action. We import our Prisma client and use its create method.
import { prisma } from '@/lib/prisma';
import { revalidatePath } from 'next/cache';
export default function CreatePostPage() {
async function createPost(formData: FormData) {
'use server';
const title = formData.get('title') as string;
const content = formData.get('content') as string;
await prisma.post.create({
data: { title, content, published: false },
});
revalidatePath('/posts'); // Refresh the posts list
}
return (
<form action={createPost}>
<input type="text" name="title" placeholder="Title" />
<textarea name="content" placeholder="Content"></textarea>
<button type="submit">Add Post</button>
</form>
);
}Read: Fetching Existing Data
The Read operation retrieves data from your database. In Next.js App Router, you can fetch data directly in Server Components.
This means your data fetching logic runs on the server, before the component is sent to the client, improving initial load times.
Read: Code Example
Here's a Server Component that fetches all posts and displays them. The await prisma.post.findMany() call runs entirely on the server.
import { prisma } from '@/lib/prisma';
export default async function PostsPage() {
const posts = await prisma.post.findMany();
return (
<div>
<h1>All Posts</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>
<b>{post.title}</b>
<p>{post.content}</p>
</li>
))}
</ul>
</div>
);
}Update: Modifying Records
Update operations change existing records. You'll typically identify the record by its unique ID and then provide the new data.
Similar to Create, an update action can be triggered from a form submission or a button click, executing server-side logic.
Update: Code Example
This Server Action updates a post's published status. We identify the post by id and use Prisma's update method.
import { prisma } from '@/lib/prisma';
import { revalidatePath } from 'next/cache';
export async function updatePostStatus(id: number, published: boolean) {
'use server';
await prisma.post.update({
where: { id },
data: { published: !published },
});
revalidatePath('/posts');
}
// Example usage in a component:
// <button onClick={() => updatePostStatus(post.id, post.published)}>
// Toggle Publish
// </button>Delete: Removing Data
Finally, Delete removes a record from the database. This is often triggered by a button and requires the record's unique identifier.
Always be careful with delete operations, as they are usually irreversible!
Delete: Code Example
Here's a Server Action for deleting a post. We use prisma.post.delete with a where clause to specify which record to remove.
import { prisma } from '@/lib/prisma';
import { revalidatePath } from 'next/cache';
export async function deletePost(id: number) {
'use server';
await prisma.post.delete({
where: { id },
});
revalidatePath('/posts'); // Refresh the posts list
}
// Example usage in a component:
// <button onClick={() => deletePost(post.id)}>
// Delete Post
// </button>CRUD Operations Check
You've learned about the four core CRUD operations. Which operation is used to retrieve existing data from the database?
Recap: CRUD with Actions
Today, you mastered performing Create, Read, Update, and Delete (CRUD) operations using Next.js Server Actions and Prisma.
- Create: Add new records.
- Read: Fetch records from the database.
- Update: Modify existing records.
- Delete: Remove records.
Server Actions make these operations efficient and secure by running them directly on the server, often requiring revalidatePath to update the UI after changes. Next, we'll explore database schema migrations!
Belajar TypeScript dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 22
- Pelajaran
- 88
Pertanyaan yang Sering Diajukan
Apakah pelajaran “CRUD dengan Server Actions” gratis?
Ya — teks lengkap “CRUD 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 (App Router + Server Actions), upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “CRUD dengan Server Actions”?
Lakukan operasi Create, Read, Update, dan Delete (CRUD) pada basis data Anda menggunakan Server Actions. Kamu berlatih Next.js 15 Fullstack (App Router + Server Actions) 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 (App Router + Server Actions)?
Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack (App Router + Server Actions) 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 2 dari 4.
Berapa lama pelajaran “CRUD 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 (App Router + Server Actions) ini?
Ya. Setiap pelajaran Next.js 15 Fullstack (App Router + Server Actions) 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
- Menyiapkan Prisma ORM
- CRUD dengan Server Actions
- Migrasi Skema Basis Data
- Pengisian Awal Basis Data dan Pengumpulan Koneksi