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

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

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

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

![img](/mosaic-code.jpg)

そしてこのコードをフロントエンドから呼び出してみましょう。
以下のコードを書きます。
![img](/mosaic-code.jpg)

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

![スクリーンショット 2023-10-26 23.12.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/216f08f0-abea-e9cc-cae2-72b38c9e6888.png)

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

フロントエンド側のコードは以下のようになります。
![img](/mosaic-code.jpg)
すると以下のように、データを取得できました!
![スクリーンショット 2023-10-27 9.04.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/cdacd0a9-a9bf-5d4f-2e8f-f77134b0959d.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]

## はじめに
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
import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({
    message: "データを取得!",
  });
}

```

そしてこのコードをフロントエンドから呼び出してみましょう。
以下のコードを書きます。
``` page.tsx
"use client";

import axios from "axios";

export default function Home() {
  const getData = async () => {
    const response = await axios.get("/api");
    console.log(response);
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
        <button
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          onClick={getData}
        >
          getDate
        </button>
      </div>
    </main>
  );
}

```

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

![スクリーンショット 2023-10-26 23.12.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/216f08f0-abea-e9cc-cae2-72b38c9e6888.png)

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

export async function GET() {
  return NextResponse.json({
    message: "/api/usersからデータを取得!",
  });
}

```

フロントエンド側のコードは以下のようになります。
```page.tsx
"use client";

import axios from "axios";

export default function Home() {
  const getData = async () => {
    const response = await axios.get("/api/users");
    console.log(response);
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
        <button
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          onClick={getData}
        >
          getDate
        </button>
      </div>
    </main>
  );
}

```
すると以下のように、データを取得できました!
![スクリーンショット 2023-10-27 9.04.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/cdacd0a9-a9bf-5d4f-2e8f-f77134b0959d.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
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

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

続きを読むには単価診断を受けてください 30秒