next cloudinary 다운로드 - next cloudinary 소스 코드 다운로드

next cloudinary

AI 소스 코드

v6.16.0

다운로드

다음으로 구름

한정되지 않은

Cloudinary가 구동하는 Next.js에서 규모로 고성능 이미지 전달 및 업로드.

특징 • 시작하기 • 커뮤니티 및 지원 • 기여

이것은 Cloudinary Developer Experience 팀이 지원하는 커뮤니티 라이브러리입니다.

특징

이미지를 자동으로 최적화하고 최신 형식으로 제공합니다
이미지에서 배경을 제거합니다
이미지와 텍스트 오버레이를 이미지에 동적으로 추가합니다
AI 기반 자르기 및 크기 조정
색상과 효과를 사용하여 이미지를 변환합니다
열린 그래프 소셜 미디어 카드를 즉시 생성합니다
드롭 인 업로드 위젯
... 모두 Cloudinary와 규모입니다

시작하기

설치

next-cloudinary 설치하십시오.

 npm install next-cloudinary

클라우드 이름으로 환경 변수 추가 :

 NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

이미지 추가

 import { CldImage } from 'next-cloudinary';

<CldImage width="600" height="600" src="<Public ID or Cloudinary URL>" alt="<Alt Text>" />

다음 Cloudinary Docs에서 Cldimage에 대해 자세히 알아보십시오

소셜 미디어 카드 생성 (열기 그래프)

 <CldOgImage src="<Public ID or Cloudinary URL>" text="Next Cloudinary" />

참고 : 2 : 1 종횡비의 표준화 된 소셜 미디어 카드 크기를 준수하기 위해 폭과 높이가 필요하지 않습니다 (또는 권장).

다음 Cloudinary Docs에서 cldogimage에 대해 자세히 알아보십시오

다른 사용 사례

배경 제거
이미지 오버레이
이미지 언더 레이
소셜 미디어 카드
텍스트 오버레이

❤️ 커뮤니티 및 지원

Github : 문제를 만듭니다
트위터 : @colbyfayock

? 기여

기고하기 전에 Contributing.md를 읽으십시오.

현지에서 일합니다

설치

이 프로젝트는 종속성 및 작업 공간을 관리하는 방법으로 PNPM을 사용하고 있습니다.

프로젝트가 복제되면 프로젝트의 루트에서 종속성을 다음과 같이 설치하십시오.

 pnpm install

구성

프로젝트 작업을하려면 활성화 된 계정이 있어야합니다. 계정을 사용하여 다음과 같이 docs 내부의 .env.local 파일을 구성하십시오.

 NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloudinary Cloud Name>"
NEXT_PUBLIC_CLOUDINARY_API_KEY="<Your Cloudinary API Key>"
CLOUDINARY_API_SECRET="<Your Cloudinary API Secret>"

참고 : Cloudinary 계정은 무료 일 수 있지만 일부 기능은 배경 제거와 같은 자유 계층 이외의 작동하지 않을 수 있습니다.

클라우드 이름은 API 키와 비밀이 현재 위젯 사용을 업로드하는 데만 사용되는 모든 사용에 필요합니다. 업로드 사전 설정은 업로드 위젯에 추가로 사용됩니다.

예제 이미지 업로드

Docs 프로젝트를 실행하려면 Cloudinary 계정 내에서 참조 된 이미지를 사용할 수 있어야합니다.

이렇게하려면 scripts 디렉토리로 이동하여 먼저 다음과 같이 새 .env 파일을 만듭니다.

 CLOUDINARY_CLOUD_NAME="<Your Cloudinary Cloud Name>"
CLOUDINARY_API_KEY="<Your API Key>"
CLOUDINARY_API_SECRET="<Your API Secret>"

그런 다음 업로드 스크립트를 실행하십시오.

 pnpm upload

기본적으로 scripts/images.json 내부의 이미지는 Cloudinary 계정 내부의 "이미지"디렉토리에 업로드됩니다. 위치를 변경하려면 CLOUDINARY_IMAGES_DIRECTORY 환경 변수를 선호하는 디렉토리와 함께 추가하십시오.

 CLOUDINARY_IMAGES_DIRECTORY="<Your Directory>"

프로젝트 실행

설치 및 구성되면 두 개의 터미널 탭을 열어서 하나를 next-cloudinary 와 docs 로 탐색하여 다음 명령을 각각 실행하십시오.

 pnpm dev

이 프로젝트는 이제 https : // localhost : 3000 또는 구성된 로컬 포트에서 사용할 수 있습니다.

실행 테스트

모든 테스트는 next-cloudinary/tests next-cloudinary/src 테스트 내부에 있습니다.

next-cloudinary 과 함께 테스트를 실행합니다.

 pnpm test

기고자

_{콜비 페이록}	_{다니엘 올라비오}	_Ramadevsign ?	_{Karey Higuera} 켈	_{아자 너울 하크} ?	_3T8	_{존 아그바누시}
_{조안 레온}	_{Tim Benniks}	_CSGOCHAN	_{Codingis4Noobs2} 켈	_미시즈	_{이 콘린}	_{라이언 스미스}
_{마이클 리엔도}	_잭	_{Matheus Cabral}	_{호세 모랄레스}	_{에릭 피 스터}	_{여호수아 올로 룬파}	_하리
_{Shoaib Asgar}	_{Adeyanju Adeyemi}	_사이먼	_{리차드 올리버 브레이}	_Zecka	_{Harshit Vashisht}	_{Sahil Silare}
_{Yash Mathur}	_{압둘 사마드}	_{Rishav Chattopadhyay}	_{Prathamesh Gawas}	_{Nwani 승리}	_{Pratyay Banerjee}	_{Saai Syvendra}