CRUD con le Server Actions
Esegua operazioni di creazione, lettura, aggiornamento ed eliminazione (CRUD) sul database usando le Server Actions.
CRUD con le Server Actions è una lezione Next.js 15 Fullstack (App Router + Server Actions) gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Next.js 15 Fullstack (App Router + Server Actions), e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Next.js 15 Fullstack (App Router + Server Actions) include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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!
Impara TypeScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 22
- Lezioni
- 88
Domande Frequenti
La lezione «CRUD con le Server Actions» è gratuita?
Sì — il testo completo di «CRUD con le Server Actions» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Next.js 15 Fullstack (App Router + Server Actions), passa a CoddyKit PRO. Il corso Next.js 15 Fullstack (App Router + Server Actions) include 4 lezioni in totale.
Cosa imparerò in «CRUD con le Server Actions»?
Esegua operazioni di creazione, lettura, aggiornamento ed eliminazione (CRUD) sul database usando le Server Actions. Eserciti Next.js 15 Fullstack (App Router + Server Actions) con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Next.js 15 Fullstack (App Router + Server Actions)?
Non è richiesta alcuna esperienza precedente. Next.js 15 Fullstack (App Router + Server Actions) su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «CRUD con le Server Actions»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Next.js 15 Fullstack (App Router + Server Actions)?
Sì. Ogni lezione Next.js 15 Fullstack (App Router + Server Actions) include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Configurare Prisma ORM
- CRUD con le Server Actions
- Migrazioni dello schema del database
- Popolamento del database e connection pooling