Server Actions: практика

'use server';

export async function createPost(formData: FormData) {
    const title = formData.get('title') as string;
    const body = formData.get('body') as string;

    if (!title || !body) {
        return { error: 'Заполните все поля' };
    }

    const post = await db.posts.create({ title, body });
    return { data: post };
}

import { createPost } from '@/app/actions';

export default function NewPost() {
    return (
        <form action={createPost}>
            <input name="title" required />
            <textarea name="body" required />
            <button type="submit">Создать</button>
        </form>
    );
}

'use client';

import { useActionState } from 'react';
import { createPost } from '@/app/actions';

export default function NewPost() {
    const [state, formAction, isPending] = useActionState(createPost, null);

    return (
        <form action={formAction}>
            <input name="title" />
            <textarea name="body" />
            {state?.error && <p className="error">{state.error}</p>}
            <button disabled={isPending}>
                {isPending ? 'Отправка...' : 'Создать'}
            </button>
        </form>
    );
}

'use server';

import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

export async function createPost(formData: FormData) {
    const post = await db.posts.create({ ... });

    revalidatePath('/posts');
    redirect(`/posts/${post.id}`);
}

import { revalidateTag } from 'next/cache';

revalidateTag('posts');

'use client';

import { useOptimistic } from 'react';

export default function Comments({ comments }: { comments: Comment[] }) {
    const [optimistic, addOptimistic] = useOptimistic(
        comments,
        (state, newComment: Comment) => [...state, newComment]
    );

    async function handleSubmit(formData: FormData) {
        const text = formData.get('text') as string;
        addOptimistic({ id: Date.now(), text, pending: true });
        await addComment(text);
    }

    return (
        <>
            <ul>
                {optimistic.map((c) => (
                    <li key={c.id} className={c.pending ? 'pending' : ''}>{c.text}</li>
                ))}
            </ul>
            <form action={handleSubmit}>
                <input name="text" />
                <button>Отправить</button>
            </form>
        </>
    );
}

'use server';

import { z } from 'zod';

const PostSchema = z.object({
    title: z.string().min(1, 'Заголовок обязателен'),
    body: z.string().min(10, 'Минимум 10 символов'),
});

export async function createPost(formData: FormData) {
    const parsed = PostSchema.safeParse({
        title: formData.get('title'),
        body: formData.get('body'),
    });

    if (!parsed.success) {
        return { error: parsed.error.flatten().fieldErrors };
    }

    const post = await db.posts.create(parsed.data);
    revalidatePath('/posts');
    return { data: post };
}

'use server';

export async function deletePost(id: number) {
    const user = await auth();
    if (!user) throw new Error('Unauthorized');

    const post = await db.posts.find(id);
    if (post.authorId !== user.id) throw new Error('Forbidden');

    await db.posts.delete(id);
    revalidatePath('/posts');
}