Next.js14でのフォーム処理：Server Actions vs Client Components

'use client';

import { useState } from 'react';

export default function TraditionalForm() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');

    const formData = new FormData(e.currentTarget);
    const data = Object.fromEntries(formData);

    try {
      const res = await fetch('/api/submit', {
        method: 'POST',
        body: JSON.stringify(data),
      });

      if (!res.ok) throw new Error('Submission failed');
      // Handle success
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error');
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="title" required />
      <button type="submit" disabled={loading}>
        {loading ? 'Submitting...' : 'Submit'}
      </button>
      {error && <p>{error}</p>}
    </form>
  );
}

import { revalidatePath } from 'next/cache';

// This function runs exclusively on the server
async function submitData(formData) {
  'use server';
  
  const title = formData.get('title');
  const content = formData.get('content');

  // Perform database mutation here
  // await db.posts.create({ title, content });

  // Revalidate the cache to show the new post
  revalidatePath('/posts');
}

export default function ServerActionForm() {
  return (
    <form action={submitData}>
      <input type="text" name="title" required />
      <textarea name="content" required />
      <button type="submit">Submit</button>
    </form>
  );
}

'use client';

import { useFormStatus } from 'react-dom';

export function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending} className="bg-blue-600 text-white px-4 py-2 rounded">
      {pending ? 'Submitting...' : 'Save Post'}
    </button>
  );
}

import { z } from 'zod';

const postSchema = z.object({
  title: z.string().min(3, 'Title must be at least 3 characters'),
  content: z.string().min(10, 'Content must be at least 10 characters'),
});

'use server';

import { revalidatePath } from 'next/cache';
// Assume postSchema is imported here

export async function createPost(prevState, formData) {
  // Validate form fields using Zod
  const validatedFields = postSchema.safeParse({
    title: formData.get('title'),
    content: formData.get('content'),
  });

  // If form validation fails, return errors early
  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
      message: 'Missing Fields. Failed to Create Post.',
    };
  }

  // Mutate data
  try {
    // await db.posts.create(validatedFields.data);
    
    revalidatePath('/posts');
    return { message: 'Post created successfully!', errors: {} };
  } catch (error) {
    return { message: 'Database Error: Failed to Create Post.', errors: {} };
  }
}

'use client';

import { useFormState } from 'react-dom';
import { createPost } from '@/app/actions';
import { SubmitButton } from './SubmitButton';

export default function CreatePostForm() {
  const initialState = { message: null, errors: {} };
  const [state, dispatch] = useFormState(createPost, initialState);

  return (
    <form action={dispatch} className="flex flex-col gap-4 max-w-md">
      <div>
        <label htmlFor="title">Title</label>
        <input id="title" name="title" type="text" className="border p-2 w-full" />
        {state.errors?.title && (
          <p className="text-red-500 text-sm mt-1">{state.errors.title[0]}</p>
        )}
      </div>

      <div>
        <label htmlFor="content">Content</label>
        <textarea id="content" name="content" className="border p-2 w-full" />
        {state.errors?.content && (
          <p className="text-red-500 text-sm mt-1">{state.errors.content[0]}</p>
        )}
      </div>

      <SubmitButton />

      {state.message && (
        <p className="text-sm text-gray-700 bg-gray-100 p-3 rounded" aria-live="polite">
          {state.message}
        </p>
      )}
    </form>
  );
}