フォームハンドリングのベストプラクティス

Next.jsでのフォームハンドリングは、ユーザーからのデータ収集やアクション処理に欠かせません。効率的なフォームの作成には、データの管理、バリデーション、サーバーとの連携が重要です。以下では、Next.jsでのフォームハンドリングにおけるベストプラクティスを紹介します。

基本的なフォーム作成

Next.jsでは、標準のHTMLフォーム要素を使用してフォームを作成できますが、効率的なデータ管理にはreact-hook-formなどのライブラリを活用すると便利です。このライブラリは、フォームの状態管理とバリデーションを簡素化し、パフォーマンスを向上させます。

import { useForm } from 'react-hook-form';
export default function ContactForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name', { required: true })} placeholder="Name" />
      {errors.name && <span>Name is required</span>}
      
      <input type="email" {...register('email', { required: true })} placeholder="Email" />
      {errors.email && <span>Email is required</span>}
      
      <button type="submit">Submit</button>
    </form>
  );
}

クライアントサイドバリデーション

クライアントサイドでのバリデーションは、即時にユーザーへフィードバックを提供し、入力ミスを減らします。react-hook-formやyupを使うことで、バリデーションルールを簡単に設定できます。例えば、入力が必須か、最低文字数や正規表現による検証を設定できます。

const { register, handleSubmit, formState: { errors } } = useForm({
  mode: 'onChange',
});
<input
  {...register('email', { 
    required: 'Email is required', 
    pattern: {
      value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
      message: 'Invalid email address'
    }
  })}
/>
{errors.email && <span>{errors.email.message}</span>}

APIルートを使ったフォーム送信

フォームデータをサーバーへ送信する際には、Next.jsのAPIルートを利用します。fetchを使って、フォームデータをPOSTリクエストで送信し、サーバー側でバリデーションと処理を行います。以下は、APIルートを使用したデータ送信の例です。

const submitContact = async (data) => {
  const response = await fetch('/api/contact', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });
  const result = await response.json();
  alert(`Thank you, ${result.name}`);
};

サーバーサイドバリデーション

クライアントサイドのバリデーションだけでなく、サーバーサイドでもデータの整合性を確認することが重要です。サーバーサイドでは、APIルートでデータを受け取り、さらに厳密なバリデーションを行い、セキュリティを確保します。

export default function handler(req, res) {
  const { name, email } = req.body;
  
  if (!name || !email) {
    return res.status(400).json({ message: 'Name and email are required' });
  }
  
  res.status(200).json({ message: 'Success', name });
}

まとめ

Next.jsでのフォームハンドリングは、クライアントサイドとサーバーサイドのバリデーションを組み合わせることで、セキュアで効率的なユーザーインターフェースを実現できます。react-hook-formを使ってデータ管理をシンプルにし、APIルートを活用してサーバーとのやり取りを行うことで、信頼性の高いフォーム機能を構築できます。

参照:

フォームハンドリングのベストプラクティス