¿Hay alguna manera de tener una documentación swagger para las rutas API NEXT.js? Estoy usando Next.js para el desarrollo de front-end y back-end y quiero tener una documentación de swagger para las API que desarrollo con Next.js.
Puede usar el siguiente proyecto para iniciar la integración entre Next.js y Swagger
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;La definición real de un punto final de ruta de la API de Next.js tiene este aspecto:
/** * @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', }); };Creé una pequeña biblioteca npm que genera automáticamente documentos de Swagger a partir de su proyecto NextJS. ¡No se necesita la entrada del usuario!
Todavía muy Beta, pero espero que sea útil. https://www.npmjs.com/package/nextjs-routes-docs
Solo corre
npx nextjs-routes-docs [dir]Debe tener los archivos json de swagger o la especificación para APIS y puede usar bibliotecas como Swagger UI o Redoc
Al usar Redoc, puede hacer un /doc/[slug].js y realizar una recuperación dinámica en los archivos .json o yaml para su documentación (o swagger ui)
Este sitio web: https://openapi.tools/ , tiene muchas herramientas para React y OpenAPI en general que puede usar.