CRUD med Server Actions
Utfør Create-, Read-, Update- og Delete-operasjoner (CRUD) på databasen din ved hjelp av Server Actions.
CRUD med Server Actions er en gratis leksjon i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 fullstack (App Router + Server Actions), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 4 leksjoner.
CRUD: Gjør databasehandlinger enkelt
Velkommen til CRUD-operasjoner med Server Actions i Next.js! CRUD står for Create, Read, Update og Delete. Dette er de fire grunnleggende operasjonene for å samhandle med enhver database.
Server Actions gir en effektiv måte å utføre disse operasjonene direkte på serveren på, noe som holder klientpakken liten og forbedrer sikkerheten.
Oppsummering: Prisma og Server Actions
I den forrige leksjonen satte vi opp Prisma. Vi skal bruke Prisma Client til å samhandle med databasen. Husk at Server Actions er asynkrone funksjoner som kjører på serveren.
De kan defineres direkte i en komponent eller i en separat actions.js-fil. Vi skal bruke en enkel Post-modell i eksemplene våre.
Create: Legge til nye data
La oss begynne med Create. Dette innebærer å legge til en ny post i databasen. Vi skal opprette et enkelt skjema som bruker en Server Action til å legge til et nytt innlegg.
Legg merke til hvordan skjemaets action-attributt kaller serverfunksjonen vår direkte. Dermed trenger vi ikke JavaScript på klientsiden for å sende inn skjemaet.
Create: Kodeeksempel
Slik oppretter du et nytt innlegg ved hjelp av en Server Action. Vi importerer Prisma-klienten og bruker metoden create.
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: Hente eksisterende data
Operasjonen Read henter data fra databasen. I Next.js App Router kan du hente data direkte i serverkomponenter.
Det betyr at logikken for datahenting kjører på serveren før komponenten sendes til klienten, noe som forbedrer innlastingstiden.
Read: Kodeeksempel
Her er en serverkomponent som henter alle innlegg og viser dem. Kallet await prisma.post.findMany() kjører i sin helhet på serveren.
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: Endre poster
Update-operasjoner endrer eksisterende poster. Vanligvis identifiserer du posten ved hjelp av den unike ID-en og oppgir deretter de nye dataene.
På samme måte som Create kan en oppdateringshandling utløses når et skjema sendes inn eller en knapp klikkes, og utfører logikk på serversiden.
Update: Kodeeksempel
Denne Server Action-en oppdaterer publiseringsstatusen til et innlegg. Vi identifiserer innlegget ved hjelp av id og bruker Primas metode update.
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: Fjerne data
Til slutt fjerner Delete en post fra databasen. Dette utløses ofte av en knapp og krever postens unike identifikator.
Vær alltid forsiktig med sletteoperasjoner, siden de vanligvis ikke kan angres!
Delete: Kodeeksempel
Her er en Server Action for å slette et innlegg. Vi bruker prisma.post.delete med en where-betingelse for å angi hvilken post som skal fjernes.
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>Kontroll av CRUD-operasjoner
Du har lært om de fire sentrale CRUD-operasjonene. Hvilken operasjon brukes til å hente eksisterende data fra databasen?
Oppsummering: CRUD med Actions
I dag har du lært å utføre Create, Read, Update og Delete (CRUD) ved hjelp av Server Actions i Next.js og Prisma.
- Create: Legge til nye poster.
- Read: Hente poster fra databasen.
- Update: Endre eksisterende poster.
- Delete: Fjerne poster.
Server Actions gjør disse operasjonene effektive og sikre ved å kjøre dem direkte på serveren. Ofte må du bruke revalidatePath for å oppdatere brukergrensesnittet etter endringer. Deretter skal vi utforske migreringer av databaseskjemaer!
Lær deg TypeScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 22
- Leksjoner
- 88
Ofte stilte spørsmål
Er leksjonen «CRUD med Server Actions» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 fullstack (App Router + Server Actions), inkludert «CRUD med Server Actions», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 4 leksjoner.
Hva lærer jeg i «CRUD med Server Actions»?
Utfør Create-, Read-, Update- og Delete-operasjoner (CRUD) på databasen din ved hjelp av Server Actions. Du øver på Next.js 15 fullstack (App Router + Server Actions) med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Next.js 15 fullstack (App Router + Server Actions)?
Ingen tidligere erfaring er nødvendig. Next.js 15 fullstack (App Router + Server Actions) på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «CRUD med Server Actions»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Next.js 15 fullstack (App Router + Server Actions)-leksjonen?
Ja. Alle Next.js 15 fullstack (App Router + Server Actions)-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Sette opp Prisma ORM
- CRUD med Server Actions
- Migreringer av databaseskjema
- Fylling av database og tilkoblingspooling