Intégrer Cloudinary dans une application Next.js

En savoir plus sur Cloudinary et ses tarifs.

1. Créez un compte Cloudinary

Inscrivez-vous sur Cloudinary et créez un nouveau compte si vous n'en avez pas.

2. Installez le SDK Cloudinary

Vous pouvez installer le SDK Cloudinary en utilisant npm ou Yarn :

npm install cloudinary

3. Configurer Cloudinary

Vous pouvez créer un fichier de configuration pour contenir vos informations d'identification Cloudinary. C'est une bonne pratique de les conserver dans des variables d'environnement.

Créez un fichier .env.local à la racine de votre projet et ajoutez vos informations d'identification Cloudinary :

CLOUDINARY_URL=cloudinary://<api_key>:<api_secret>@<cloud_name>

</cloud_name></api_secret></api_key>

4. Configurez Cloudinary dans votre application

// utils/cloudinary.js
import { v2 as cloudinary } from 'cloudinary';

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

export const uploadImage = async (file) => {
  try {
    const result = await cloudinary.uploader.upload(file, {
      folder: 'your_folder_name', // optional
    });
    return result.secure_url; // Return the URL of the uploaded image
  } catch (error) {
    console.error('Cloudinary upload error:', error);
    throw new Error('Upload failed');
  }
};

5. Utilisez la fonction de téléchargement

// pages/api/upload.js
import { uploadImage } from '../../utils/cloudinary';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { file } = req.body; // Assume you're sending a file in the body

    try {
      const url = await uploadImage(file);
      res.status(200).json({ url });
    } catch (error) {
      res.status(500).json({ error: error.message });
    }
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

6. Télécharger depuis le frontend

// components/ImageUpload.js
import { useState } from 'react';

const ImageUpload = () => {
  const [file, setFile] = useState(null);
  const [imageUrl, setImageUrl] = useState('');

  const handleFileChange = (event) => {
    setFile(event.target.files[0]);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append('file', file);

    const res = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    });

    const data = await res.json();
    if (data.url) {
      setImageUrl(data.url);
    } else {
      console.error('Upload failed:', data.error);
    }
  };

  return (
    

Upload {imageUrl && }

); }; export default ImageUpload;

7. Testez votre configuration

Exécutez votre application Next.js et testez la fonctionnalité de téléchargement d'images.

Conclusion

Vous devriez maintenant avoir une intégration fonctionnelle de Cloudinary dans votre application Next.js ! Si vous avez des exigences spécifiques ou avez besoin d'une personnalisation plus poussée, n'hésitez pas à demander !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!