next cloudinary

Nächste Wolkin

undefiniert

Hochleistungs-Bildlieferung und Hochladen in Skala in Next.js von Cloudary.

Funktionen • Erste Schritte • Community & Support • Mitwirkende

Dies ist eine Community -Bibliothek, die vom Cloudinary Developer Experience -Team unterstützt wird.

Merkmale

• Bilder automatisch optimieren und in modernen Formaten liefern
• Entfernen Sie Hintergründe aus den Bildern
• Fügen Sie dynamisch Bild- und Textüberlagerungen zu Bildern hinzu
• AI-basierte Anbasis und Größe
• Transformation Bilder mit Farbe und Effekten
• Generieren Sie Open Graph Social Media -Karten im laufenden Fliegen
• Drop-In-Upload-Widget
• ... alles in Skala mit Wolkin

Erste Schritte

Installation

• Installieren Sie next-cloudinary mit:

 npm install next-cloudinary

• Fügen Sie mit Ihrem Cloud -Namen eine Umgebungsvariable hinzu:

 NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

Hinzufügen eines Bildes

 import { CldImage } from 'next-cloudinary';

<CldImage width="600" height="600" src="<Public ID or Cloudinary URL>" alt="<Alt Text>" />

Erfahren Sie mehr über CLDIMage über die nächsten Wolkinocs

Generieren einer Social -Media -Karte (Open Graph)

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

Hinweis: Die Breite und Höhe ist nicht erforderlich (oder empfohlen), um die standardisierte Social -Media -Kartengröße eines Seitenverhältnisses von 2: 1 einzuhalten.

Erfahren Sie mehr über Cldogimage über die nächsten Wolksar

Andere Anwendungsfälle

• Hintergrundentfernung
• Bildüberlagerungen
• Bild unterliegt
• Social Media Card
• Textüberlagerungen

❤️ Community & Support

• Github: Erstellen Sie ein Problem
• Twitter: @colbyFayock

? Beitragen

Bitte lesen Sie vor dem Beitrag beitragen.md.

Lokal arbeiten

Installation

In diesem Projekt wird PNPM verwendet, um Abhängigkeiten und Arbeitsbereiche zu verwalten.

Installieren Sie die Abhängigkeiten mit geklonten Projekten aus der Wurzel des Projekts mit:

 pnpm install

Konfiguration

Um an dem Projekt zu arbeiten, müssen Sie ein aktives Cloudinary -Konto haben. Konfigurieren Sie mit dem Konto eine .env.local -Datei in docs mit:

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

Hinweis: Das Cloudinary -Konto kann kostenlos sein, aber einige Funktionen funktionieren möglicherweise nicht über die kostenlose Stufe wie die Hintergrundentfernung

Der Cloud -Name ist für die gesamte Verwendung erforderlich, wobei der API -Schlüssel und das Geheimnis derzeit nur zum Hochladen von Widget -Nutzung verwendet werden. Das Upload -Voreinsatz wird zusätzlich für die Upload -Widgets verwendet.

Beispielbilder hochladen

Um das DOCS -Projekt auszuführen, müssen Sie die Bilder in Ihrem Cloudyary -Konto zur Verfügung stellen.

Navigieren Sie dazu zum scripts -Verzeichnis und erstellen Sie zunächst eine neue .env -Datei mit:

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

Führen Sie dann das Upload -Skript mit: aus:

 pnpm upload

Standardmäßig werden die Bilder in scripts/images.json in das Verzeichnis "Images" in Ihrem Cloudinary -Konto hochgeladen. Um den Standort zu ändern, fügen Sie die Umgebungsvariable CLOUDINARY_IMAGES_DIRECTORY mit Ihrem bevorzugten Verzeichnis hinzu:

 CLOUDINARY_IMAGES_DIRECTORY="<Your Directory>"

Das Projekt ausführen

Öffnen Sie nach der Installation und Konfiguration zwei Registerkarten der Anschluss, wobei Sie eins nach next-cloudinary und einen zu docs navigieren, wobei der folgende Befehl in jeweils:

 pnpm dev

Das Projekt ist jetzt unter https: // localhost: 3000 oder dem konfigurierten lokalen Port verfügbar.

Auslauftests

Alle Tests befinden sich in der next-cloudinary/tests mit einer Verzeichnisstruktur, die next-cloudinary/src widerspiegeln sollte.

Führen Sie bei next-cloudinary Tests mit: Führen Sie mit:

 pnpm test

Mitwirkende

Colby Fayock	Daniel Olavio	RamadevSign ?	Karey Higuera Euen	Azanul Haque ?	3t8	John Agbanusi
Joan León	Tim Benniks	csgochan	codingis4noobs2 Euen	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 -Sieg	Pratyay Banerjee	Saai Syvendra