# nextjsで開発中にモックサーバーを立ち上げたいのでnext-swagger-docと@stoplight/prism-cliを比較してみた
Table of Contents
フロントエンドを開発するときにバックエンドサーバ―の用意ができていない時がよくある。
今までは側だけ作って待機していたが、せっかくなのでモックサーバーを立ち上げ、バックエンドができ次第、URLの向きを変え、完成！ という風に出来ればと思いモックサーバーの立ち上げを調べてみた。
json-server
まずはjson-serverを使おうと思ったけど、同じエンドポイントでGet、Postが分けられなさそうということで不採用にした。けど、よくよく落ち着いて調べてみるとできるかもしれない。
いつか機をみて使ってみたい。
が、今回は上記の通り不採用した。
app/api
次に、そもそもnextjsにはAPIを作る機能があるじゃないかと思いだし、それを活用することにした。
ついでにAPI仕様書も作れればなおいいということで調べてみると、next-swagger-docというものがあった。
これでAPIを作成し、しかもSwaggerを作成できると舞い上がり実装してみた。
実装
npm i next-swagger-docnpm 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;};※以降先頭行がファイル名になっている。
app/api-doc/react-swagger.tsx
'use client';
import SwaggerUI from 'swagger-ui-react';import 'swagger-ui-react/swagger-ui.css';
type Props = { spec: Record<string, any>,};
function ReactSwagger({ spec }: Props) { return <SwaggerUI spec={spec} />;}
export default ReactSwagger;app / api - doc / page.tsx;
import { getApiDocs } from "@/lib/swagger";import ReactSwagger from "./react-swagger";
export default async function IndexPage() { const spec = await getApiDocs(); return ( <section className="container"> <ReactSwagger spec={spec} /> </section> );}app/api/hello/route.ts
/** * @swagger * /api/hello: * get: * description: Returns the hello world * responses: * 200: * description: Hello World! */export async function GET(_request: Request) { // Do whatever you want return new Response('Hello World!', { status: 200, });}これで完成したけど、これもじっと考えてみると、普通にAPI作っているのと何ら変わらないのではないか。
ということに気が付いた。
この労力を使うのではバックエンドサーバー作ったほうがよっぽど早い気がする。
ということで不採用にした。
@stoplight/prism-cliを使うことにした。
結果的に、@stoplight/prism-cliを使うことにした。
これは作成されたSwaggerからモックサーバーを立ち上げてくれるというもの。
どうせAPI仕様書を作ってからバックエンドサーバーを作るので、それをSwaggerで作るという風にすればいい。
そうすればバックエンドを作る前にその仕様書からモックサーバーを立ち上げることができるので、業務ストップがなくなる。
使い方は、
npm install @stoplight/prism-cliでインストールし、package.jsonに起動の記述を作成する。
"swaggerMock": "prism mock sample.yml"これで、ルートにsample.ymlを作成するれば、それがモックサーバーとして起動される。
