Read About Cloudinary and its pricing.
Sign up at Cloudinary and create a new account if you don't have one.
You can install the Cloudinary SDK using npm or yarn:
npm install 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>
// 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'); } };
// 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`); } }
// 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 (
Run your Next.js application and test the image upload functionality.
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!