こんばんは。
今日は「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アプリケーションの開発がより効率的かつセキュアになります。
今日は以上です。
ありがとうございました。
よろしくお願いいたします。