Next.jsにおけるサーバーアクションの利用

CRUD操作への注目。これまではサーバーからデータを読み取り、ユーザーに表示するだけでした。ここからは、データの作成、更新、削除に焦点を当てます。これらすべてを請求書ページで実施します。

理論

実装に入る前に、Next.jsにおけるServer Actionsという用語について考察します。

Server Actionsは、特別なコードをサーバー上で直接実行するための機能。複雑な方法でデータを変更する必要はなく、これらのアクションを利用できます。

Server Actionsが重要な理由

Webアプリケーションはさまざまな攻撃を受ける可能性があるため、セキュリティが必要不可欠です。Server Actionsはセキュリティ面で大きな役割を果たします。特別なリクエスト、暗号化されたメッセージ、厳格なチェックや制限など、さまざまな技術を用いてアプリを攻撃から守り、データを保護し、認可されたユーザーのみがアクセスできるようにします。

Server Actionsとフォームの連携方法

Server Actionsを利用したフォームの作成が可能。簡単に言えば、フォーム内に特別なコードを記述し、どのアクションを実行するか指定する。このアクションは、フォームに入力されたデータを自動的に受け取る。

// Server Component
export default function Page() {
  // Action
  async function create(formData: FormData) {
    'use server';
 
    // Logic to change data...
  }
 
  // Put the action in the `action` attribute
  return <form action={create}>...</form>;
}