带Swagger的Next.js

Question

有没有办法获得NEXT.js应用编程接口路由的swagger文档？我正在使用Next.js进行前端和后端开发，我想为我用Next.js开发的API提供一个夸张的文档。

Answer 1

您必须具有用于APIS的swagger json文件或规范，并且可以使用库，如Swagger UI或Redoc

使用Redoc，您可以执行/doc/slug.js，并为您的文档(或swagger ui)动态获取.json或yaml文件。

这个网站：https://openapi.tools/，有很多用于React和OpenAPI的工具，你可以使用它。

Answer 2

您可以使用以下项目来引导Next.js和Swagger之间的集成

• https://github.com/jellydn/next-swagger-doc
• https://www.npmjs.com/package/next-swagger-doc
• Demo

yarn add next-swagger-doc swagger-ui-react

import { GetStaticProps, InferGetStaticPropsType } from 'next';

import { createSwaggerSpec } from 'next-swagger-doc';
import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';

const ApiDoc = ({ spec }: InferGetStaticPropsType<typeof getStaticProps>) => {
  return <SwaggerUI spec={spec} />;
};

export const getStaticProps: GetStaticProps = async ctx => {
  const spec: Record<string, any> = createSwaggerSpec({
    title: 'NextJS Swagger',
    version: '0.1.0',
  });
  return { props: { spec } };
};

export default ApiDoc;

Next.js应用编程接口路由端点的实际定义如下所示：

/**
 * @swagger
 * /api/hello:
 *   get:
 *     description: Returns the hello world
 *     responses:
 *       200:
 *         description: hello world
 */
const handler = (_req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({
    result: 'hello world',
  });
};

Answer 3

我做了一个小的npm库，它可以从你的NextJS项目中自动生成Swagger文档。不需要用户输入！

仍然是Beta版，但希望它是有用的。https://www.npmjs.com/package/nextjs-routes-docs

快跑吧

npx nextjs-routes-docs [dir]