Leia sobre Cloudinary e seus preços.

1. Crie uma conta na nuvem

Inscreva-se na Cloudinary e crie uma nova conta se ainda não tiver uma.

2. Instale o SDK Cloudinary

Você pode instalar o Cloudinary SDK usando npm ou yarn:

npm install cloudinary

3. Configurar Cloudinary

Você pode criar um arquivo de configuração para armazenar suas credenciais do Cloudinary. É uma boa prática mantê-los em variáveis ​​de ambiente.

Crie um arquivo .env.local na raiz do seu projeto e adicione suas credenciais Cloudinary:

CLOUDINARY_URL=cloudinary://:@

4. Configure o Cloudinary em seu aplicativo

// 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. Use a função de upload

// 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. Faça upload do front-end

// 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 && }

7. Teste sua configuração

Execute seu aplicativo Next.js e teste a funcionalidade de upload de imagens.

Conclusão

Agora você deve ter uma integração funcional do Cloudinary em seu aplicativo Next.js! Se você tiver algum requisito específico ou precisar de mais personalização, fique à vontade para perguntar!