Next-Cloudinary

Next Cloudinary

Next Cloudinary는 Next.js 프로젝트에서 Cloudinary를 사용하기 위한 커뮤니티 기반 솔루션

여기에는 CldImage 구성 요소, 소셜 카드 및 업로드 위젯과 같은 도구가 포함되어 있다.

CldImage 구성 요소는 Next.js Image 구성 요소를 래핑하여 Cloudinary 기술의 힘으로 기능을 확장한다.

여기에는 동적 자르기 및 크기 조정, 배경 제거, 이미지 및 텍스트 오버레이와 같은 자동 최적화 이상의 기능이 포함된다.

기본 사용법을 위해서는 먼저 다음을 사용하여 패키지를 설치
npm은 next-cloudinary를 설치한다.

npm install next-cloudinary

.env

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<클라우드 이름>"

'next-cloudinary'에서 { CldImage }를 가져온다.

ImageUpload.tsx

'use client';

import { CldUploadWidget } from "next-cloudinary";
import Image from "next/image";
import { useCallback } from "react";
import { TbPhotoPlus } from 'react-icons/tb'

declare global {
  var cloudinary: any
}

const uploadPreset = "skdksldk";

interface ImageUploadProps {
  onChange: (value: string) => void;
  value: string;
}

const ImageUpload: React.FC<ImageUploadProps> = ({
  onChange,
  value
}) => {
  const handleUpload = useCallback((result: any) => {
    onChange(result.info.secure_url);
  }, [onChange]);

  return (
    <CldUploadWidget 
      onUpload={handleUpload} 
      uploadPreset={uploadPreset}
      options={{
        maxFiles: 1
      }}
    >
      {({ open }) => {
        return (
          <div
            onClick={() => open?.()}
            className="
              relative
              cursor-pointer
              hover:opacity-70
              transition
              border-dashed 
              border-2 
              p-20 
              border-neutral-300
              flex
              flex-col
              justify-center
              items-center
              gap-4
              text-neutral-600
            "
          >
            <TbPhotoPlus
              size={50}
            />
            <div className="font-semibold text-lg">
              Click to upload
            </div>
            {value && (
              <div className="
              absolute inset-0 w-full h-full">
                <Image
                  fill 
                  style={{ objectFit: 'cover' }} 
                  src={value} 
                  alt="House" 
                />
              </div>
            )}
          </div>
        ) 
    }}
    </CldUploadWidget>
  );
}

export default ImageUpload;

Next.js 이미지 구성 요소 허용 도메인

next.config.js 파일에서 구성에 다음을 추가.

  images: {
    domains: [
      'res.cloudinary.com', 
      'lh3.googleusercontent.com'
    ]
  }