Documentación Swagger con Next.js

Swagger UI permite crear una documentación interactiva y profesional para tus APIs de Next.js. En este tutorial, vamos a integrar Swagger en tu aplicación Next.js.

Instalación y configuración

Instalación de las dependencias

npm install swagger-ui-react swagger-jsdoc
npm install --save-dev @types/swagger-ui-react @types/swagger-jsdoc

Configuración básica

// lib/swagger.js
import swaggerJSDoc from 'swagger-jsdoc'

const options = {
  definition: {
    openapi: '3.0.0',
    info: {
      title: 'Mon API Next.js',
      version: '1.0.0',
      description: 'Documentation de l\'API créée avec Next.js',
      contact: {
        name: 'Support API',
        email: 'support@monapi.com',
        url: 'https://monapi.com/support'
      }
    },
    servers: [
      {
        url: 'http://localhost:3000/api',
        description: 'Serveur de développement'
      }
    ],
    components: {
      securitySchemes: {
        bearerAuth: {
          type: 'http',
          scheme: 'bearer',
          bearerFormat: 'JWT'
        }
      }
    }
  },
  apis: ['./pages/api/**/*.js'], // Rutas a tus archivos de API
}

export const swaggerSpec = swaggerJSDoc(options)