Next.js 애플리케이션에 Cloudinary 통합

Cloudinary 및 가격에 대해 알아보세요.

1. Cloudinary 계정 생성

Cloudinary에 가입하고 계정이 없다면 새 계정을 만드세요.

2. Cloudinary SDK 설치

npm 또는 Yarn을 사용하여 Cloudinary SDK를 설치할 수 있습니다.

npm install cloudinary

3. Cloudinary 구성

Cloudinary 자격 증명을 보관할 구성 파일을 생성할 수 있습니다. 이를 환경 변수에 보관하는 것이 좋습니다.

프로젝트 루트에 .env.local 파일을 생성하고 Cloudinary 자격 증명을 추가하세요.

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

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

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 && }

); }; export default ImageUpload;

7. 설정 테스트

Next.js 애플리케이션을 실행하고 이미지 업로드 기능을 테스트하세요.

결론

이제 Next.js 앱에 Cloudinary가 통합되어 작동할 것입니다! 특정 요구 사항이 있거나 추가 맞춤화가 필요한 경우 언제든지 문의하세요!

위 내용은 Next.js 애플리케이션에 Cloudinary 통합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!