【ISSUE】Next.jsを使ったAPI開発
2024年12月23日 8:40
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]
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。