اقرأ عن Cloudinary وتسعيره.

1. قم بإنشاء حساب Cloudinary

قم بالتسجيل في Cloudinary وقم بإنشاء حساب جديد إذا لم يكن لديك حساب.

2. قم بتثبيت Cloudinary SDK

يمكنك تثبيت Cloudinary SDK باستخدام npm أو الغزل:

npm install cloudinary

3. تكوين Cloudinary

يمكنك إنشاء ملف تكوين للاحتفاظ ببيانات اعتماد Cloudinary الخاصة بك. من الممارسات الجيدة الاحتفاظ بها في متغيرات البيئة.

قم بإنشاء ملف .env.local في جذر مشروعك وأضف بيانات اعتماد Cloudinary الخاصة بك:

CLOUDINARY_URL=cloudinary://:@

4. قم بإعداد Cloudinary في تطبيقك

// 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 الخاص بك واختبر وظيفة تحميل الصور.

خاتمة

يجب أن يكون لديك الآن تكامل عملي لـ Cloudinary في تطبيق Next.js الخاص بك! إذا كان لديك أي متطلبات محددة أو كنت بحاجة إلى مزيد من التخصيص، فلا تتردد في طرحها!