Server ActionsとAPI、どっちを使う？【Next.js Appフォルダ】

APIとServer Actions、どっちを使うか

現在のNext.js（バージョン14／Appフォルダ）では、Server Actionsが安定版として提供されています。

Server Actionsを使えば、APIを作らなくても、ダイレクトにデータベースとの連携やCRUD操作が可能です。

ここでAppフォルダ以前のNext.jsを使ってきた人が疑問に思うのが、apiフォルダで開発できるAPIルート（AppフォルダではRoute Handlers）と、このServer Actionsの使い分けでしょう。

それぞれのメリット、デメリット

表にすると次のようになります。

私は汎用的なアプローチができるAPIが好みですが、それぞれにメリット／デメリットがあるので、アプリの規模や目的に応じて適切なものを選びましょう。

お知らせ：新刊書リリース

2024年11月に、Server Actionsを使ってフルスタックアプリを開発する新刊書をリリースしました。

Next.js／Reactビギナー向け入門です。

2024年11月時点で最新のNext.jsバージョン15を使用しています。

Next.js Server Actionsでつくるフルスタックアプリ

【2024年11月リリース。少ないコードですばやく本格的なフルスタックアプリを開発する方法を紹介】

880円 → 0円

Amazonのページに移動する

私がAPIを使っている理由

私は、最新のNext.jsを使ってフルスタックアプリを作る解説書を出しています。

Next.jsでつくるフルスタックアプリ

【最新バージョンのNext.jsとAppフォルダで、フルスタックアプリを自力で作る力を手にいれる】

1980円 → 0円

Amazonのページに移動する

この本のリリースは2023年12月。そしてNext.jsバージョンは14を使っているので、Server Actionsはもちろん利用可能でした。

しかもこの本で行うデータベース操作／CRUD操作はそこまで複雑ではないので、Server Actionsで十分対応できるものでした

それでもServer Actionsは使わず、API（Route Handlers）を使ったのは、この本が前著の改訂版として出したものだからです。

2022年4月にこの本の初版を出しましたが、そこで使っていたのは当時の最新版のNext.jsバージョン12。Server Actionsも、Appフォルダもまだ実装されていませんでした。

そのためあの本では、apiフォルダを使ってバックエンドとフロントエンドを分離して開発し、フルスタックアプリを作ることがメインコンセプトになっていました。

同じ方針を今回のバージョン14を使った改訂版でも踏襲しているため、Server Actionsは使わず、Route HandlersでAPIを分離して設計し、そしてフロントエンドで利用するというアーキテクチャとなっています。