Integrate Cloudinary in a Next.js application-JS Tutorial-php.cn

Integrate Cloudinary in a Next.js application

Mary-Kate Olsen

Release： 2024-09-21 16:32:17

Original

445 people have browsed it

Integrate Cloudinary in a Next.js application

Read About Cloudinary and its pricing.

1. Create a Cloudinary Account

2. Install Cloudinary SDK

You can install the Cloudinary SDK using npm or yarn:

npm install cloudinary

Copy after login

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>

Copy after login

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');
  }
};

Copy after login

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`);
  }
}

Copy after login

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 (

Copy after login

); }; 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!