データMutationのためのServer Actions

Server Actionsとは

Server Actionの定義

// app/actions.ts
'use server';

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

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  await db.post.create({ data: { title } });
  revalidatePath('/blog');
  redirect('/blog');
}

フォームでのActionの使用

import { createPost } from './actions';

export default function NewPostForm() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Post title" required />
      <button type="submit">Create</button>
    </form>
  );
}

useActionStateフック

'use client';
import { useActionState } from 'react';
import { createPost } from './actions';

const initialState = { error: null };

export function PostForm() {
  const [state, action, isPending] = useActionState(createPost, initialState);
  return (
    <form action={action}>
      {state.error && <p className="error">{state.error}</p>}
      <input name="title" />
      <button disabled={isPending}>{isPending ? 'Creating...' : 'Create'}</button>
    </form>
  );
}

バリデーションエラーの返却

export async function createPost(prevState: any, formData: FormData) {
  'use server';
  const title = formData.get('title') as string;
  if (!title || title.length < 3) {
    return { error: 'Title must be at least 3 characters' };
  }
  await db.post.create({ data: { title } });
  revalidatePath('/blog');
  redirect('/blog');
}

イベントハンドラーでのServer Actions

'use client';
import { deletePost } from './actions';

export function DeleteButton({ id }: { id: string }) {
  return (
    <button onClick={() => deletePost(id)}>
      Delete
    </button>
  );
}

インラインServer Actions

export default function PostPage({ post }) {
  async function updatePost(formData: FormData) {
    'use server';
    await db.post.update({ where: { id: post.id }, data: { title: formData.get('title') as string } });
    revalidatePath(`/blog/${post.id}`);
  }

  return (
    <form action={updatePost}>
      <input name="title" defaultValue={post.title} />
      <button type="submit">Save</button>
    </form>
  );
}

Server ActionsでのuseOptimistic

'use client';
import { useOptimistic } from 'react';
import { addItem } from './actions';

export function TodoList({ items }) {
  const [optimisticItems, addOptimistic] = useOptimistic(items, (state, newItem) => [...state, newItem]);
  return (
    <form action={async (formData) => {
      addOptimistic({ id: 'temp', text: formData.get('text') });
      await addItem(formData);
    }}>
      <ul>{optimisticItems.map(i => <li key={i.id}>{i.text}</li>)}</ul>
      <input name="text" /><button>Add</button>
    </form>
  );
}

セキュリティ上の考慮事項

ミューテーション後の再検証

理解度チェック

まとめ