توثيق Swagger مع Next.js

يتيح لك Swagger UI إنشاء توثيق تفاعلي واحترافي لواجهات APIs الخاصة بتطبيق Next.js. سنقوم في هذا الدرس بدمج Swagger في تطبيق Next.js الخاص بك.

التثبيت والإعداد

تثبيت الاعتماديات

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

الإعداد الأساسي

// 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'], // مسارات ملفات API الخاصة بك
}

export const swaggerSpec = swaggerJSDoc(options)