【Next.js + Orval + MSW】型安全 API クライアント & モック環境構築

こんにちは。チームラボのフロントエンド班の志田です。好きなものはモアイです🗿 今回初めて技術記事を書いてみました。 Next.js、Orval、MSW に関して気になっている方、ちょっと長いですが、ぜひ最後までお付き合いください！ はじめに フロントエンド開発において、RESTful API を呼び出す処理（API クライアントコード）を作るのは結構手間がかかります。GET なのか POST なのか、リクエストやレスポンスの型は何なのかなど、考慮することが多いです。 といったことから近年では OpenAPI スキーマから、型定義や API クライアントコードを自動で生成するツールがよく使われています。 Orval は、OpenAPI のスキーマから、型安全な API クライアントコードを自動で生成してくれるツールです。 さらには、MSW で利用可能な API モック関数をスキーマから同時