next cloudinary

下一個雲

不明確的

高性能圖像交付和下載在Next.js中，由Cloudinary提供動力。

功能•入門•社區和支持•貢獻

這是由Cloudinary Developer Experience團隊支持的社區圖書館。

特徵

• 自動優化圖像並以現代格式交付
• 從圖像中刪除背景
• 動態添加圖像和文字疊加到圖像
• 基於人工智能的裁剪和調整大小
• 使用顏色和效果轉換圖像
• 即時生成開放圖表社交媒體卡
• 下載窗口小部件
• ...全部大規模與雲

入門

安裝

• 與以下方式安裝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>" />

在下一個雲文檔中了解有關Cldimage的更多信息

生成社交媒體卡（開放圖）

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

注意：不需要（或建議）寬度和高度以符合2：1縱橫比的標準化社交媒體卡尺寸。

在下一個雲文檔中了解有關CldoGimage的更多信息

其他用例

• 背景拆除
• 圖像疊加層
• 圖像底層
• 社交媒體卡
• 文字疊加

❤️社區和支持

• github：創建一個問題
• Twitter：@ColbyFayock

？貢獻

請在貢獻之前先閱讀貢獻。

在當地工作

安裝

該項目使用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密鑰和秘密目前僅用於上傳窗口小部件。上傳預設還用於上傳小部件。

上傳示例圖像

為了運行文檔項目，您需要在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/src目錄結構的next-cloudinary/tests的內部。

在next-cloudinary內部，運行測試以：

 pnpm test

貢獻者

科爾比·費托克（Colby Fayock）	丹尼爾·奧拉維奧（Daniel Olavio）	Ramadevsign ？	Karey Higuera 配x	Azanul Haque ？	3T8	約翰·阿格巴西（John Agbanusi）
瓊·萊昂	蒂姆·本尼克斯	Csgochan	codingis4noobs2 配x	Michizhou	李·康林	瑞安·史密斯
邁克爾·利倫多	傑克	Matheus Cabral	何塞·莫拉萊斯（Jose Morales）	埃里克·普菲斯特（Eric Pfister）	Joshua Olorunnipa	哈里
Shoaib Asgar	Adeyanju Adeyemi	西蒙	理查德·奧利弗·布雷（Richard Oliver Bray）	Zecka	Harshit Vashisht	Sahil Silare
Yash Mathur	阿卜杜勒·薩馬德（Abdul Samad）	Rishav Chattopadhyay	Prathamesh Gawas	恩瓦尼勝利	Pratyay Banerjee	Saai Syvendra