Next.jsでRoute Handlerを利用したAPIサーバーの構築方法

今回はNext.jsを利用したAPIサーバーの立て方を記事として書いていきます。Next.jsを利用すると、とても楽にAPIサーバーを構築できて、エンドポイントもファイルベースのルーティングで直感的に設定することができるので、Next.jsをこれから触れてみて、取り敢えず何かサーバーとのやり取りをするアプリケーションを作成してみたいときは記事通りに進めていけば、おそらく起動まではできるかと思います。(prismaとかでサーバーコンポーネントはデータを直接やり取りできるので、エンドポイントを作成してクライアントコンポーネントからわざわざデータを撮る意味があるのかは謎ですが)

1. プロジェクトのインストール

作成したい場所まで、「cd」コマンドを使用して移動し、以下のコマンドを使用してプロジェクトをインストールします。

$ npx create-next-app@latest

コマンドを打つとコンソール上で質問されるので、その設定をしていくことでプロジェクトがインストールされます。

2. オプションの設定

Need to install the following packages:
  create-next-app@14.2.7
Ok to proceed? (y) 

まず初めに、導入するバージョンの確認をされます。筆者が記事を書くにあたり、改めてプロジェクトのセットアップをするタイミングでは$14.2.7$が最新バージョンでしたのでこちらを使用します。バージョンの問題が特になければ、「y」を入力してエンターキーを押して次に進みます。

? What is your project named? › my-app

次に、プロジェクト名を聞かれるので、プロジェクトの名前をコンソール上に入力してください。今回はデフォルトの$my-app$という名前を付けて、エンターキーを押し次に進みます。

? Would you like to use TypeScript? › No / Yes

次は、「TypeScript」をプロジェクトで使用するのかを聞かれます。矢印キーでYesとNoを選べるので、使用したい方を選択してエンターキーを押します。筆者はTypeScriptを使用してのプロジェクトを好んでいるので、今回は「Yes」を選択します。

? Would you like to use ESLint? › No / Yes

次にESLintを使用するかどうかを設定します。コードの規則を設定することができるツールですので、使える方は「Yes」を選択しておくと良いでしょう。

? Would you like to use Tailwind CSS? › No / Yes

次はTailwind CSSを使用するのかを選択できます。Tailwind CSSは便利なCSSフレームワークですが、人によって使いやすい使いにくいがあるので、使いたい方は「Yes」を選択しておくと良いと思います。

筆者は便利だと思っているので、当然使用します。

? Would you like to use `src/` directory? › No / Yes

次にsrcディレクトリを追加するかを選択できます。Yesを選択した場合には、アプリケーションになる部分はsrcディレクトリ配下に生成されるので、プロジェクトを管理しやすくなります。今回の「Route Handler」の機能を使用するにあたりどちらでも良いので、好きな方を選択しましょう。

? Would you like to use App Router? (recommended) › No / Yes

これは「App Router」というNext.jsの新しいルーティングの機能を使用するために必要な設定になります。サイトを一括で共通のレイアウトにする機能や、ルーティングを使用するために必須で、今回はこのルーティングを使用するので、必ず「Yes」を選択してください。v13以前のプロジェクトを使用すると、この「App Router」の機能は使用できないため、必ず記事通りに進めるためにはv13以降を使用するようにしてください。

✔ Would you like to customize the default import alias (@/*)? … No / Yes
? What import alias would you like configured? › @/*

次にエイリアスの設定になります。これを使用すると、外部ファイルのインポートを楽にしてくれる機能を使用できます。デフォルトではプロジェクトのsrcフォルダをルートディレクトリとして扱い、ファイルパスを使用することができる機能ですので、使用することをお勧めします。ただし、ここで設定をしなくても後から「tsconfig.json」ファイルの設定を変更すれば使用できるので、今回はお好みで選択してください。本記事では「Yes」を選択して先に進みます。

3. プロジェクトの起動

プロジェクトのあるディレクトリにcdコマンドで移動して、下記のコマンドを使用します。

# カレントディレクトリを変更
cd my-app
# アプリケーションサーバーの立ち上げ
npm run dev

上記コマンドを実行すると、アプリケーションが立ち上がりブラウザに「http://localhost:3000」とアドレスバーに入力すると最初の画面が立ち上がります。

4. Route Handlerについて

Route Handlerとは、JSON形式のデータを返すようなエンドポイントを作成します。Reactなどで作成したブラウザアプリケーションはサーバーと通信して色々な機能をつけていくので、作成できるようになると外部とのやり取りをする機能を実装したいときにとても役に立ちます。他にもRESTfulなAPIを実装したいときには、Webフレームワークで「Nest.js」とかも選択肢の一つになるかと思います。Nest.jsはAngularっぽいフォルダ構造をしており、純粋なRestAPIを作成するのに向いているので、用途に合わせて選定してください。

5. エンドポイントとなるフォルダの作成

フォルダの名前と構造が/以下のルーティングと一致するので、使用したいルーティングと一致するようにフォルダを作成してください。

.
└── src
    └── app
        └── api
            └── hello
                └── route.ts

例えば、上記のようなディレクトリ構造になっている場合には、http://localhost:3000/ の/以下がapi/helloとなっていればそのエンドポイントにhttpリクエストを送ることができます。今回はhttp://localhost:3000/api/hello/ とブラウザに入力するとデータが返ってくるように設定します。以下のようにroute.tsファイルにコードを書き込みます。

import { NextResponse } from "next/server"

export const GET = () => {
  return new NextResponse(JSON.stringify({hello: 'こんにちは'}))
}

上記のコードは、エンドポイントにGETリクエストが来たら、returnで返ってくる値を返すという意味のコードになります。実際にブラウザにhttp://localhost:3000/api/hello/ と入力すると下記のようなJSON形式のデータが返ってきます。

{"hello":"こんにちは"}

このように外部からurlを使ってリクエストを送るだけで、データのやり取りができるようになる機構を作成することができました。他にもPOST、PUT、DELETEメソッドなど様々なHTTPリクエストに対応するエンドポイントを作成することが簡単にできます。

近日中にprismaライブラリを使用して、dockerなどで建てたmariaDBなどのSQLサーバーにデータを保存・読み出しできるアプリケーションを作る記事を作成する予定ですので、よろしければそちらもご覧ください。

最後に

最後まで読んでいただきありがとうございました。