{
  "$type": "site.standard.document",
  "canonicalUrl": "https://blog.nove-b.dev//posts/nextjs-mock-server-next-swagger-doc-vs-prism-cli",
  "description": "開発中にモックサーバーを立ち上げたかったので方法を調べてみた。",
  "path": "/posts/nextjs-mock-server-next-swagger-doc-vs-prism-cli",
  "publishedAt": "2024-06-18T00:00:00.000Z",
  "site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
  "tags": [
    "nextjs",
    "モックサーバー",
    "next-swagger-doc",
    "@stoplight/prism-cli"
  ],
  "textContent": "フロントエンドを開発するときにバックエンドサーバ―の用意ができていない時がよくある。\n\n今までは側だけ作って待機していたが、せっかくなのでモックサーバーを立ち上げ、バックエンドができ次第、URLの向きを変え、完成！ という風に出来ればと思いモックサーバーの立ち上げを調べてみた。\n\njson-server\n\nまずはjson-serverを使おうと思ったけど、同じエンドポイントでGet、Postが分けられなさそうということで不採用にした。けど、よくよく落ち着いて調べてみるとできるかもしれない。\n\nいつか機をみて使ってみたい。\n\nが、今回は上記の通り不採用した。\n\napp/api\n\n次に、そもそもnextjsにはAPIを作る機能があるじゃないかと思いだし、それを活用することにした。\n\nついでにAPI仕様書も作れればなおいいということで調べてみると、next-swagger-docというものがあった。\n\nこれでAPIを作成し、しかもSwaggerを作成できると舞い上がり実装してみた。\n\n実装\n\nまずはインストールする。\n\nちなみにバージョンは下記の通り。\n\nlib/swagger.tsに下記をコピペする。\n\n※以降先頭行がファイル名になっている。\n\nこれで完成したけど、これもじっと考えてみると、普通にAPI作っているのと何ら変わらないのではないか。\n\nということに気が付いた。\n\nこの労力を使うのではバックエンドサーバー作ったほうがよっぽど早い気がする。\n\nということで不採用にした。\n\n@stoplight/prism-cliを使うことにした。\n\n結果的に、@stoplight/prism-cliを使うことにした。\n\nこれは作成されたSwaggerからモックサーバーを立ち上げてくれるというもの。\n\nどうせAPI仕様書を作ってからバックエンドサーバーを作るので、それをSwaggerで作るという風にすればいい。\n\nそうすればバックエンドを作る前にその仕様書からモックサーバーを立ち上げることができるので、業務ストップがなくなる。\n\n使い方は、\n\nでインストールし、package.jsonに起動の記述を作成する。\n\nこれで、ルートにsample.ymlを作成するれば、それがモックサーバーとして起動される。",
  "title": "nextjsで開発中にモックサーバーを立ち上げたいのでnext-swagger-docと@stoplight/prism-cliを比較してみた"
}