###### # Next Cloudinary High-performance image delivery and uploading at scale in Next.js powered by Cloudinary. Features • Getting Started • Community & Support • Contributing **This plugin is a community library and not officially supported by Cloudinary.** ## ✨ Features * Automatically optimize images and deliver in modern formats * Remove backgrounds from images * Dynamically add image and text overlays to images * AI-based cropping and resizing * Transform images using color and effects * Generate Open Graph Social Media cards on the fly * Drop-in Upload Widget * ...all at scale with Cloudinary ## 🚀 Getting Started ### Installation * Install `next-cloudinary` with: ``` yarn add next-cloudinary # or npm install next-cloudinary ``` * Add an environment variable with your Cloud Name: ``` NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="" ``` ### Adding an Image ``` import { CldImage } from 'next-cloudinary'; ``` [Learn more about CldImage on the Next Cloudinary Docs](https://next.cloudinary.dev/cldimage/basic-usage) ### Generating an Social Media Card (Open Graph) ``` ``` > Note: The width and height is not required (or recommended) to comply with standardized social media card sizing of a 2:1 aspect ratio. [Learn more about CldOgImage on the Next Cloudinary Docs](https://next.cloudinary.dev/cldogimage/basic-usage) ### Other Use Cases * [Background Removal](https://next.cloudinary.dev/guides/background-removal) * [Image Overlays](https://next.cloudinary.dev/guides/image-overlays) * [Image Underlays](https://next.cloudinary.dev/guides/image-underlays) * [Social Media Card](https://next.cloudinary.dev/guides/social-media-card) * [Text Overlays](https://next.cloudinary.dev/guides/text-overlays) ## ❤️ Community & Support * [GitHub: Create an Issue](https://github.com/cloudinary-community/next-cloudinary/issues) * [Twitter: @colbyfayock](https://twitter.com/colbyfayock) ## 🛠 Contributing Please read [CONTRIBUTING.md](https://github.com/cloudinary-community/next-cloudinary/blob/main/CONTRIBUTING.md) prior to contributing. ### Working Locally #### Installation This project is using [yarn](https://yarnpkg.com/) as a way to manage dependencies and workspaces. With the project cloned, install the dependencies from the root of the project with: ``` yarn install ``` #### Configuration To work on the project, you need to have an active Cloudinary account. With the account, configure a `.env.local` file inside of `docs` with: ``` NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="" NEXT_PUBLIC_CLOUDINARY_API_KEY="" CLOUDINARY_API_SECRET="" ``` > Note: The Cloudinary account can be free, but some features may not work beyond free tier like Background Removal The Cloud Name is required for all usage, where the API Key and Secret currently is only used for Upload Widget usage. The Upload Preset is additionally used for the Upload Widgets. #### Uploading Example Images In order to run the Docs project, you need to have the images referenced available inside of your Cloudinary account. To do this, navigate to the `scripts` directory and first create a new `.env` file with: ``` CLOUDINARY_CLOUD_NAME="" CLOUDINARY_API_KEY="" CLOUDINARY_API_SECRET="" ``` Then run the upload script with: ``` yarn upload ``` By default, the images inside of `scripts/images.json` will be uploaded to the "images" directory inside of your Cloudinary account. To change the location, add the `CLOUDINARY_IMAGES_DIRECTORY` environment variable with your preferred directory: ``` CLOUDINARY_IMAGES_DIRECTORY="" ``` #### Running the Project Once installed and configured, open two terminal tabs, navigating one to `next-cloudinary` and one to `docs`, running the following command in each: ``` yarn dev ``` The project will now be available at or the configured local port. ### Running Tests All tests are located inside of `next-cloudinary/tests` with a directory structure that should reflect `next-cloudinary/src`. While inside `next-cloudinary`, run tests with: ``` yarn test ``` ## Contributors

Colby Fayock 💻 📖 💡	Daniel Olavio 💻	ramadevsign 🔧	Karey Higuera ⚠️ 💻	Azanul Haque 🔧	3t8 📖	John Agbanusi 💻 📖
Joan León 📖	Tim Benniks 💻 📖	csgochan 📖	codingis4noobs2 💻 ⚠️	michizhou 💻	Lee Conlin 💻	Ryan Smith 💻
Michael Liendo 📖	Jack 💻	Matheus Cabral 💻	Jose Morales 💻	Eric Pfister 💻	Joshua Olorunnipa 💻	Hari 📖
Shoaib Asgar 💻	Adeyanju Adeyemi 💻	Simon 📖	Richard Oliver Bray 💻