【ISSUE】Next.jsを使ったAPI開発

0

2024年12月23日 8:40

はじめに

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

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

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

基本的なフォルダ構成

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

サンプルコード

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

img

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

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

スクリーンショット 2023-10-26 23.12.14.png

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

フロントエンド側のコードは以下のようになります。
img
すると以下のように、データを取得できました!
スクリーンショット 2023-10-27 9.04.15.png

ドキュメント

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

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]

0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。