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