क्लाउडिनरी और इसकी कीमत के बारे में पढ़ें।

1. एक क्लाउडिनरी अकाउंट बनाएं

क्लाउडिनरी पर साइन अप करें और यदि आपके पास एक नया खाता नहीं है तो एक नया खाता बनाएं।

2. क्लाउडिनरी एसडीके स्थापित करें

आप एनपीएम या यार्न का उपयोग करके क्लाउडिनरी एसडीके स्थापित कर सकते हैं:

npm install cloudinary

3. क्लाउडिनरी कॉन्फ़िगर करें

आप अपने क्लाउडिनरी क्रेडेंशियल्स को बनाए रखने के लिए एक कॉन्फ़िगरेशन फ़ाइल बना सकते हैं। इन्हें पर्यावरण चर में रखना अच्छा अभ्यास है।

अपने प्रोजेक्ट रूट में एक .env.local फ़ाइल बनाएं और अपने क्लाउडिनरी क्रेडेंशियल जोड़ें:

CLOUDINARY_URL=cloudinary://:@

4. अपने एप्लिकेशन में क्लाउडिनरी सेट करें

// 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. अपलोड फ़ंक्शन का उपयोग करें

// 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. फ्रंटएंड से अपलोड करें

// 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. अपने सेटअप का परीक्षण करें

अपना Next.js एप्लिकेशन चलाएं और छवि अपलोड कार्यक्षमता का परीक्षण करें।

निष्कर्ष

अब आपके नेक्स्ट.जेएस ऐप में क्लाउडिनरी का कार्यशील एकीकरण होना चाहिए! यदि आपकी कोई विशिष्ट आवश्यकता है या आगे अनुकूलन की आवश्यकता है, तो बेझिझक पूछें!