はじめに

Next.jsでAPIの開発をできるがあるので、メモ代わりに書いていきます。

Next.jsにおけるAPI開発とは

Next.jsはReactのフレームワークになりますが、APIを作成して、同じコードベースの中で、フロントエンドとバックエンドのコードを書くことができ、呼び出すことができます。Node.jsなどを使ってサーバを立てなくても、DBにアクセスできたりすることができるということです。

基本的なフォルダ構成

今回はApp Routerを使用していきます。
基本的には、appフォルダ配下に、apiフォルダを作成して、その中にファイルを追加して、APIのコードを書いていくことができます。そして、そのディレクトリ名と、ファイル名がAPIのエンドポイントになります。

サンプルコード

ドキュメントに沿って、簡単なAPIを作ります。
まずは、以下のコードを/api/router.jsに書いていきます。

そしてこのコードをフロントエンドから呼び出してみましょう。
以下のコードを書きます。

すると、以下のように/api/route.jsに作成したデータが取得できました！

次は、apiのエンドポイントを「/api/users」としてみましょう。
usersディレクトリをapiディレクトリ配下に作り、その中にrouter.jsを作り、以下のようなコード書いていきます。

フロントエンド側のコードは以下のようになります。

すると以下のように、データを取得できました!

ドキュメント

以下が参考にしたドキュメントです。

https://nextjs-ja-translation-docs.vercel.app/docs/api-routes/introduction

最後に

以上がNext.jsを使ったAPI開発をしていきました。
今回は、App Routerを使いましたが、Page RouterとApp Routerでは作り方が違うので注意が必要になります。

他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]