Swagger Documentation with Next.js

Swagger UI lets you create interactive, professional documentation for your Next.js APIs. In this tutorial, we will integrate Swagger into your Next.js application.

Installation and configuration

Installing dependencies

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

Basic configuration

// 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'], // Paths to your API files
}

export const swaggerSpec = swaggerJSDoc(options)