Repository files navigation

  

undefined

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.

• 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

• Installnext-cloudinary with:

npm install next-cloudinary

• Add an environment variable with your Cloud Name:

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>" />

Learn more about CldImage on the Next Cloudinary Docs

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

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

• Background Removal
• Image Overlays
• Image Underlays
• Social Media Card
• Text Overlays

• GitHub: Create an Issue
• Twitter: @cloudinary

Please readCONTRIBUTING.md prior to contributing.

This project is usingpnpm as a way to manage dependencies and workspaces.

With the project cloned, install the dependencies from the root of the project with:

pnpm install

To work on the project, you need to have an active Cloudinary account. With the account, configure a.env.local file inside ofdocs with:

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>"

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.

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 thescripts directory and first create a new.env file with:

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

Then run the upload script with:

pnpm upload

By default, the images inside ofscripts/images.json will be uploaded to the "images" directory inside of your Cloudinary account. To change the location, add theCLOUDINARY_IMAGES_DIRECTORY environment variable with your preferred directory:

CLOUDINARY_IMAGES_DIRECTORY="<Your Directory>"

Once installed and configured, open two terminal tabs, navigating one tonext-cloudinary and one todocs, running the following command in each:

pnpm dev

The project will now be available athttps://localhost:3000 or the configured local port.

All tests are located inside ofnext-cloudinary/tests with a directory structure that should reflectnext-cloudinary/src.

While insidenext-cloudinary, run tests with:

pnpm test

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 💻	zecka 💻	Harshit Vashisht 📖	Sahil Silare 💻
Yash Mathur 💻	Abdul Samad 📖	Rishav Chattopadhyay 📖	Prathamesh Gawas 📖	Nwani Victory 📖💻	Pratyay Banerjee 📖	Saai Syvendra 📖
Mohammad Zaki 📖	Kim Hallberg 📖