Next.js 15 Fullstack (App Router + Server Actions) · Lesson

CRUD with Server Actions

Perform Create, Read, Update, and Delete (CRUD) operations on your database using Server Actions.

CRUD with Server Actions is a free Next.js 15 Fullstack (App Router + Server Actions) lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Next.js 15 Fullstack (App Router + Server Actions) learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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!

Frequently asked questions

Is the “CRUD with Server Actions” lesson free?

Yes — the full text of “CRUD with Server Actions” is free to read here on the web, and the Next.js 15 Fullstack (App Router + Server Actions) course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Next.js 15 Fullstack (App Router + Server Actions) course, upgrade to CoddyKit PRO.

What will I learn in “CRUD with Server Actions”?

Perform Create, Read, Update, and Delete (CRUD) operations on your database using Server Actions. You practise Next.js 15 Fullstack (App Router + Server Actions) with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Next.js 15 Fullstack (App Router + Server Actions)?

No prior experience is required. Next.js 15 Fullstack (App Router + Server Actions) on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “CRUD with Server Actions” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Next.js 15 Fullstack (App Router + Server Actions) lesson?

Yes. Every Next.js 15 Fullstack (App Router + Server Actions) lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Next.js 15 Fullstack (App Router + Server Actions)