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

Sunucu Eylemleriyle CRUD

Sunucu Eylemlerini kullanarak veritabanınızda Oluşturma, Okuma, Güncelleme ve Silme (CRUD) işlemlerini gerçekleştirin.

Sunucu Eylemleriyle CRUD, CoddyKit'te ücretsiz bir Next.js 15 Fullstack (App Router + Server Actions) dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Next.js 15 Fullstack (App Router + Server Actions) öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Next.js 15 Fullstack (App Router + Server Actions) kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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!

Sıkça Sorulan Sorular

“Sunucu Eylemleriyle CRUD” dersi ücretsiz mi?

Evet — “Sunucu Eylemleriyle CRUD” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Next.js 15 Fullstack (App Router + Server Actions) kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Next.js 15 Fullstack (App Router + Server Actions) kursu toplamda 4 dersten oluşur.

“Sunucu Eylemleriyle CRUD” dersinde ne öğreneceğim?

Sunucu Eylemlerini kullanarak veritabanınızda Oluşturma, Okuma, Güncelleme ve Silme (CRUD) işlemlerini gerçekleştirin. Next.js 15 Fullstack (App Router + Server Actions) ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Next.js 15 Fullstack (App Router + Server Actions) öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Next.js 15 Fullstack (App Router + Server Actions), başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Sunucu Eylemleriyle CRUD” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Next.js 15 Fullstack (App Router + Server Actions) dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Next.js 15 Fullstack (App Router + Server Actions) dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Prisma ORM'yi Kurma
Sunucu Eylemleriyle CRUD
Veritabanı Şeması Göçleri
Veritabanı Tohumlama ve Bağlantı Havuzlama

← Next.js 15 Fullstack (App Router + Server Actions) Sayfasına Dön