APIの設定

今回はAPIルートを使って簡単なバックエンドを作ります.

前回

前回を参照

APIルートの設定

APIルートとは?

Next.jsが提供する機能でAPIエンドポイントが作れます. まずpagesフォルダ以下にapiというフォルダを作ります. この中にハンドラを定義します. フォルダのパスがそのままAPIのパスとして使われます.

例えばapi/quizzes.jsなら

http://localhost:3000/api/quizzes

としてアクセスできます.

ハンドラのシグニチャ

ハンドラはリクエストを受け取ってレスポンスを返すような非同期関数です.

const handler = async (req, res) => {
    // do something with local file system, database,  or external apis
}

これをファイルの末尾でエクスポートしておくだけです.

export default handler

HTTPメソッド

api/quizzesエンドポイントではクイズの取得, クイズの作成ができます. これらはHTTPメソッドの違いで区別されるわけです. メソッドはreq.methodで参照できます.

export default function handler(req, res) {
  if (req.method === 'POST') {
    // Process a POST request
  } else {
    // Handle any other HTTP method
  }
}

API Routes

これは少しめんどくさいです. next-connectを使うともう少し整理した書き方が出来るようになります.

dgraph-js-http

DgraphへのアクセスはJavaScriptクライアントのdgraph-js-httpを使います.

インストール

npm i dgraph-js-http

読み込み

import * as dgraph from 'dgraph-js-http'

クライアントの作成

その前にDgraph ZeroのURLを.env.localに保存しておきましょう.

DGRAPH_URL='http://localhost:8080/'

これを使いクライアントを作成します. DgraphClientStubは第一引数にアドレスを取ります.

function DgraphClientStub(addr, stubConfig, options) {
   ...
}

このインスタンスをDgraphClientに渡します.

const clientStub = new dgraph.DgraphClientStub(process.env.DGRAPH_URL)
const dgraphClient = new dgraph.DgraphClient(clientStub)

next-connect

実際にデータをやり取りするにはHTTPメソッドの指定が必要です. またその度にクライアントを作成するのも面倒です. next-connectを使うとHTTPメソッドごとのハンドラのヒモ付やDBクライアント取得処理をミドルウェア化できます. 内部的にはtrouterという機能を使っているようです.

導入

npm i next-connect

ミドルウェア

middlware/database.js

import * as dgraph from 'dgraph-js-http'
import nextConnect from 'next-connect';

const clientStub = new dgraph.DgraphClientStub(process.env.DGRAPH_URL)
const dgraphClient = new dgraph.DgraphClient(clientStub)

async function database(req, res, next) {
    req.dbClient = dgraphClient;
    return next();
}

const middleware = nextConnect();

middleware.use(database);

export default middleware;

dbClientとして参照出来るようになります. ハンドラ側ではミドルウェアを利用するようにします.

import nextConnect from 'next-connect';
import middleware from '../../../middleware/database';

const handler = nextConnect();
handler.use(middleware);
export default handler;

ハンドラの登録

各メソッド毎にハンドラを登録できるようになりました.

const getHandler = async (req, res) => { /*...*/ }

handler.get(getHandler)

これで

GET http://localhost:8080/api/quizzes
POST http://localhost:8080/api/quizzes

を使い分けることができるようになりました.

Dgraphクライアントへのアクセス

reqから参照できます.

const getQuizzes = async (req, res) => {
    const client = req.dbClient
}

まとめ

next-connectを使うことでHTTPメソッドとハンドラの関係性が記述しやすくなったかなと思います.

次回

次回を参照

Reference

Create a Next.js App with a MySQL Database That Builds and Deploys with Vercel
Building Modern Applications with Next.js and MongoDB
Next.jsのAPI Routerを使ってMongoDBからデータを引っ張ってくるAPIを作る(next-connectを利用したミドルウェアも)