Documentation Swagger avec Next.js

Swagger UI permet de créer une documentation interactive et professionnelle pour vos APIs Next.js. Dans ce tutoriel, nous allons intégrer Swagger dans votre application Next.js.

Installation et configuration

Installation des dépendances

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

Configuration de base

// 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'], // Chemins vers vos fichiers API
}

export const swaggerSpec = swaggerJSDoc(options)