Cloudinary 및 가격에 대해 알아보세요.
Cloudinary에 가입하고 계정이 없다면 새 계정을 만드세요.
npm 또는 Yarn을 사용하여 Cloudinary SDK를 설치할 수 있습니다.
npm install cloudinary
Cloudinary 자격 증명을 보관할 구성 파일을 생성할 수 있습니다. 이를 환경 변수에 보관하는 것이 좋습니다.
프로젝트 루트에 .env.local 파일을 생성하고 Cloudinary 자격 증명을 추가하세요.
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 (); }; export default ImageUpload;
Next.js 애플리케이션을 실행하고 이미지 업로드 기능을 테스트하세요.
이제 Next.js 앱에 Cloudinary가 통합되어 작동할 것입니다! 특정 요구 사항이 있거나 추가 맞춤화가 필요한 경우 언제든지 문의하세요!
위 내용은 Next.js 애플리케이션에 Cloudinary 통합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!