🦁

Next.jsのAPI RoutesでExpressミドルウェアは使えないかもしれない

2022/01/01に公開

タイトルには少々語弊がある.正確には「Connect非互換のExpressミドルウェアは使えない」だ.

API Routesにおけるリクエスト・レスポンスオブジェクト

API Routesで扱うリクエスト・レスポンスオブジェクトは,IncomingMessageOutgoingMessage にいくつかのヘルパーが生えたようなもので,詳細はドキュメントに記載がある.

API Routes: Response Helpers | Next.js

ただし,このオブジェクトはExpressのリクエスト・レスポンスオブジェクトと互換性があるわけではない.

例えば, req.ips はExpressのリクエストオブジェクトでは使用できるが,Next.jsでは使えない.

つまり,API Routesで使用するミドルウェアはConnect互換である必要がある.

You can also use Connect compatible middleware.
API Routes: API Middlewares | Next.js

npm上には便利なExpressミドルウェアが大量に公開されていて,そういった資産を有効活用したい,という気持ちはある.

ただし,Connect互換のミドルウェアかどうかについて明記されているものは多くなさそうだし,そういったミドルウェアについて,独自に調査するのも面倒くさい.

Next.jsでCustom ServerなしにExpressミドルウェアを使う方法について

実は,ExpressのApplicationオブジェクトはそれ自体が関数になっていて,
リクエスト・レスポンスオブジェクトを渡せばリクエストを処理してくれる.

DefinitelyTyped/index.d.ts at master · DefinitelyTyped/DefinitelyTyped

つまり,下記のようにすれば,Next.jsでCustom Serverを使わずにExpressミドルウェアを扱うことができる.

const app = express();
app.use(
  someExpressMiddleware,
  (req, res) => res.json({ message: "hello" })
);
export default app;

Discussion