Next.js 15 & Server Actions: モダンWebの新しいアーキテクチャ

APIの時代は終わるのか？

従来のWeb開発では、フロントエンドとバックエンドの間に常に厚い壁がありました。APIエンドポイント（API Endpoints）です。データの取得にはGETリクエスト、変更にはPOSTリクエストを送信し、JSONのトラフィックを管理するためだけに何行ものコードを書いていました。

Suprastでは、Next.js 15でこの壁を取り払っています。現在、フロントエンドはバックエンドを直接呼び出します。どのように？Server Actionsを使用します。

Server Actionsとは？

簡単に言えば、JavaScriptのボタンハンドラーのように、クライアント側から直接サーバー側の関数をトリガーできる機能です。HTTPメソッドも、手動のシリアライズも、追加のAPIルートファイルも必要ありません。

// actions/create-project.ts
'use server';

export async function createProject(formData: FormData) {
  await db.project.create({ ... });
  revalidatePath('/projects');
}

なぜこのアーキテクチャを選んだのか？

1. ゼロバンドルサイズ（Zero-Bundle Size）: Server Actionのコードはクライアント（ブラウザ）に送信されることはありません。これにより、アプリケーションの起動速度が劇的に向上します。
2. エンドツーエンドの型安全性（End-to-End Type Safety）: TypeScriptで定義されたバックエンドの型は、フロントエンドで自動的に認識されます。データベーススキーマが変更された場合、フォームコンポーネントはエラーをスローします。これにより、「ランタイムリスク」が排除されます。
3. プログレッシブエンハンスメント（Progressive Enhancement）: JavaScriptが無効になっていても、フォームは機能し続けます（React 19のおかげです）。

結論

Suprastのエンジニアリングチームとして、NovargeやSigortafiのようなトラフィックの多いプロジェクトでこのアーキテクチャに移行しました。結果として、コードが40%削減され、データフローが100%安全になりました。

未来はAPIのないWebです。