Integrate Cloudinary in a Next.js application

Read About Cloudinary and its pricing.

1. Create a Cloudinary Account

Sign up at Cloudinary and create a new account if you don't have one.

2. Install Cloudinary SDK

You can install the Cloudinary SDK using npm or yarn:

npm install cloudinary

3. Configure Cloudinary

You can create a configuration file to hold your Cloudinary credentials. It’s good practice to keep these in environment variables.

Create a .env.local file in your project root and add your Cloudinary credentials:

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

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

4. Set Up Cloudinary in Your 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. Use the Upload Function

// 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. Upload from the 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. Test Your Setup

Run your Next.js application and test the image upload functionality.

Conclusion

You should now have a working integration of Cloudinary in your Next.js app! If you have any specific requirements or need further customization, feel free to ask!

The above is the detailed content of Integrate Cloudinary in a Next.js application. For more information, please follow other related articles on the PHP Chinese website!