Next.js の API Routes から SWR の型推論を導く

BRANK

本記事は 「Recruit Engineers Advent Calendar 2021」 ２日目の記事です。 ファイルシステム API Routes の課題Next.js のファイルシステムを利用した routing は、直感的に定義を追加することができます。一方、モジュールシステム観点からは透過的参照がないため、TypeScript の型推論と相性が悪いです。Next.js における型安全な routing ソリューションとして pathpida がありますが、API Routes には対応していません。useSWR から API Routes を利用する様なシーンにおいて、型安全に貢献するソリューションが見当たらなかったので自作してみました（リポジトリはこちら）本サンプルでは、npm script のpostinstallを hook に、src/types/pages/apiに生成ファイルが出力されるので、あらかじめnpm installを実行してお試しください。 サンプルで実現している型推論概要はじめに簡単な API Routes の定義を見ていきます。以下の様に、req.queryで渡された値を返却する API を実装しているとします。// pages/api/greet.ts const handler = (req, res) => { res.status(200).json({ data: { message: `hello ${req.query.name}` } }); }; export default handler; こ…