こんばんは。

今日は「Next.js 14で導入された「Server Actions」について」について説明いたします。

Next.js 14で導入された「Server Actions」は、サーバーサイドでコードを直接実行するための非同期関数です。これにより、フォームの送信やデータの更新など、ユーザーの操作に応じてサーバーサイドの処理をシームレスに行うことが可能となります。

主な特徴

サーバーサイド実行: Server Actionsはサーバー上で実行されるため、データの取得や更新をクライアントサイドで行う必要がなくなります。
フォーム処理の簡素化: 従来はAPIルートを作成してフォームデータを処理していましたが、Server Actionsを使用することで、フォームのaction属性に直接関数を指定するだけで処理が可能です。
セキュリティの向上: サーバーサイドでコードが実行されるため、クライアントサイドでの脆弱性を減らし、セキュリティを強化できます。

使用例

Server Actionsを使用してフォームデータを処理する例です。

Actions登録ファイルを作成

まず、app/actions.tsまたはapp/actions/server.tsというファイルを作成します。

typescript
Copy code

// app/actions/server.ts
export async function handleSubmit(formData: FormData) {
  'use server';
  const name = formData.get('name');
  // 데이터베이스 저장 로직 등을 여기에 작성
  console.log(`Name received: ${name}`);
}

この例では、フォームのaction属性にhandleSubmit関数を指定し、フォームが送信されるとサーバーサイドで処理が実行されます。

作成したActions関数を利用

次に、既存のコンポーネントでこのServer Actionをインポートして使用します。

// app/page.tsx
import { handleSubmit } from './actions/server';

export default function Page() {
  return (
    <form action={handleSubmit}>
      <input type="text" name="name" placeholder="Enter your name" />
      <button type="submit">Submit</button>
    </form>
  );
}

構造とメリット

モジュール化: Server Actionsが別ファイルに分離されるため、再利用性と可読性が向上します。
安全性: 'use server'ディレクティブにより、クライアントサイドと分離してサーバー専用として実行されます。
テストしやすい: Server Actionsが独立しているため、テストが簡単です。

注意点

Server Actionsはexportで明示的にエクスポートする必要があります。他のファイルで利用するにはインポートしてください。
use serverは、Server Action内でのみ使用し、クライアントコンポーネントでは直接利用できません。

Server Actionsを活用することで、Next.jsアプリケーションの開発がより効率的かつセキュアになります。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。