Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cloudinary-community/next-cloudinary
⚡️ High-performance image delivery and uploading at scale in Next.js powered by Cloudinary.
https://github.com/cloudinary-community/next-cloudinary
cloudinary hacktoberfest nextjs
Last synced: 6 days ago
JSON representation
⚡️ High-performance image delivery and uploading at scale in Next.js powered by Cloudinary.
- Host: GitHub
- URL: https://github.com/cloudinary-community/next-cloudinary
- Owner: cloudinary-community
- License: mit
- Created: 2022-08-18T20:56:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-15T17:32:21.000Z (2 months ago)
- Last Synced: 2024-10-16T22:19:49.018Z (2 months ago)
- Topics: cloudinary, hacktoberfest, nextjs
- Language: TypeScript
- Homepage: https://next.cloudinary.dev
- Size: 2.76 MB
- Stars: 253
- Watchers: 8
- Forks: 74
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
######
# Next Cloudinary
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.**
## ✨ 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:
```
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 [pnpm](https://pnpm.io/) 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 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:
```
pnpm 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
💻
zecka
💻
Harshit Vashisht
📖
Sahil Silare
💻
Yash Mathur
💻
Abdul Samad
📖
Rishav Chattopadhyay
📖
Prathamesh Gawas
📖
Nwani Victory
📖 💻
Pratyay Banerjee
📖
Saai Syvendra
📖