nextjsで開発中にモックサーバーを立ち上げたいのでnext-swagger-docと@stoplight/prism-cliを比較してみた
フロントエンドを開発するときにバックエンドサーバ―の用意ができていない時がよくある。 今までは側だけ作って待機していたが、せっかくなのでモックサーバーを立ち上げ、バックエンドができ次第、URLの向きを変え、完成！ という風に出来ればと思いモックサーバーの立ち上げを調べてみた。 json-server まずはjson-serverを使おうと思ったけど、同じエンドポイントでGet、Postが分けられなさそうということで不採用にした。けど、よくよく落ち着いて調べてみるとできるかもしれない。 いつか機をみて使ってみたい。 が、今回は上記の通り不採用した。 app/api 次に、そもそもnextjsにはAPIを作る機能があるじゃないかと思いだし、それを活用することにした。 ついでにAPI仕様書も作れればなおいいということで調べてみると、next-swagger-docというものがあった。 これでAPIを作成し、しかもSwaggerを作成できると舞い上がり実装してみた。 実装 npm i next-swagger-doc npm i swagger-ui-react まずはインストールする。 ちなみにバージョンは下記の通り。 "next": "14.2.3", "next-swagger-doc": "^0.4.0", "react": "^18", "swagger-ui-react": "^5.17.14" lib/swagger.tsに下記をコピペする。 import { createSwaggerSpec } from "next-swagger-doc"; export const getApiDocs = async () => { const spec = createSwaggerSpec({ apiFolder: "app/api", // define api folder under app folder definition: { openapi: "3.0.0", info: { title: "Next Swagger API Example", version: "1.0", }, components: { securitySchemes: { BearerAuth: { type: "http", scheme: "bearer", bearerFormat: "JWT", }, }, }, security: [], }, }); return spec; }; ※以降先頭行がファイル名になっている。...