Server ActionsとAPI、どっちを使う？【Next.js Appフォルダ】
2024.2.28
この記事は約2分で読めます
この記事の筆者：三好アキ
🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。
🔹 自身のJavaScript挫折経験をもとに、HTMLとCSSの知識だけで本格的なアプリ開発を始められる入門書を多数執筆中。合計著作は22冊を超える。
🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2
React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。登録はこちらから → 無料メルマガ登録
APIとServer Actions、どっちを使うか
現在のNext.js（バージョン14／Appフォルダ）では、Server Actionsが安定版として提供されています。
Server Actionsを使えば、APIを作らなくても、ダイレクトにデータベースとの連携やCRUD操作が可能です。
ここでAppフォルダ以前のNext.jsを使ってきた人が疑問に思うのが、apiフォルダで開発できるAPIルート（AppフォルダではRoute Handlers）と、このServer Actionsの使い分けでしょう。
それぞれのメリット、デメリット
表にすると次のようになります。
| API（Route Handlers） | Server Actions | |
|---|---|---|
| 特徴 | 汎用的 | 限定的 |
| 用途 | データベースとの複雑な連携操作があるケース | シンプルなCRUD操作が主のケース |
| メリット | APIを、他のアプリケーションやモバイルアプリも利用可 | コードの記述量を抑え、コンパクトかつ短時間で開発可 |
| デメリット | コードの記述量や開発工程が増える | Next.jsでしか利用できない |
私は汎用的なアプローチのできるAPIが好みですが、それぞれにメリット／デメリットがあるので、アプリの規模や目的に応じて適切なものを選びましょう。
私が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を分離して設計し、そしてフロントエンドで利用するというアーキテクチャとなっています。
メルマガ配信中
（from 三好アキ／エンジニア）
React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
（*配信はいつでも停止できます）
関連記事
