next-cloudinary
v6.17.5TypeScript
<picture> <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/62209650/196528621-b68e9e10-7e55-4c7d-9177-904cadbb4296.png" align="center" height=50> <source media="(prefers-color-scheme: light)" srcset="https
0/weekUpdated 2 months agoMITUnpacked: 250.4 KB
Published by colbyfayock
######
Next Cloudinary
High-performance image delivery and uploading at scale in Next.js powered by Cloudinary.
Features • Getting Started • Community & Support • Contributing
This is a community library supported by the Cloudinary Developer Experience team.
✨ 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
$3
* Install next-cloudinary with:
``
npm install next-cloudinary
* Add an environment variable with your Cloud Name:
`
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="
$3
`
import { CldImage } from 'next-cloudinary';
`
Learn more about CldImage on the Next Cloudinary Docs
$3
`
> 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
$3
* Background Removal
* Image Overlays
* Image Underlays
* Social Media Card
* Text Overlays
❤️ Community & Support
* GitHub: Create an Issue
* Twitter: @cloudinary
🛠 Contributing
Please read CONTRIBUTING.md prior to contributing.
$3
#### Installation
This project is using pnpm as a way to manage dependencies and workspaces.
With the project cloned, install the dependencies from the root of the project with:
`
pnpm 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:
`
pnpm 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:
`
pnpm dev
The project will now be available at
$3
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:
`
pnpm test
