next cloudinary

Next cloudinary

indéfini

Livraison d'images haute performance et téléchargement à grande échelle dans Next.js alimenté par Cloudinary.

Fonctionnalités • Démarrage • Communauté et soutien • Contribution

Il s'agit d'une bibliothèque communautaire soutenue par l'équipe Cloud dans l'expérience du développeur.

Caractéristiques

• Optimiser automatiquement les images et livrer dans des formats modernes
• Supprimer les arrière-plans des images
• Ajouter dynamiquement des superpositions d'image et de texte aux images
• Croping et redimensionnement basés sur l'IA
• Transformez les images en utilisant la couleur et les effets
• Générer des cartes de médias sociaux à graphe ouvert à la volée
• Widget de téléchargement de dépôt
• ... tout à grande échelle avec le cloudinar

Commencer

Installation

• Installez next-cloudinary avec:

 npm install next-cloudinary

• Ajoutez une variable d'environnement avec votre nom de cloud:

 NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

Ajout d'une image

 import { CldImage } from 'next-cloudinary';

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

En savoir plus sur ClDimage sur les prochains documents cloudinary

Générer une carte de médias sociaux (graphique ouvert)

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

Remarque: La largeur et la hauteur ne sont pas requises (ou recommandées) pour se conformer à la dimensionnement standardisé des cartes de médias sociaux d'un rapport d'aspect 2: 1.

En savoir plus sur Cldogimage sur les prochains documents cloudinary

Autres cas d'utilisation

• Retrait de l'arrière-plan
• Superpositions d'image
• Sous-tendus d'image
• Carte de médias sociaux
• Superpositions de texte

❤️ Communauté et soutien

• Github: créez un problème
• Twitter: @colbyfayock

? Contributif

Veuillez lire contribution.md avant de contribuer.

Travailler localement

Installation

Ce projet utilise PNPM comme moyen de gérer les dépendances et les espaces de travail.

Avec le projet cloné, installez les dépendances à partir de la racine du projet avec:

 pnpm install

Configuration

Pour travailler sur le projet, vous devez avoir un compte cloudinaire actif. Avec le compte, configurez un fichier .env.local à l'intérieur des docs avec:

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

Remarque: le compte cloudinary peut être gratuit, mais certaines fonctionnalités peuvent ne pas fonctionner au-delà du niveau gratuit comme la suppression de fond

Le nom du cloud est requis pour toute utilisation, où la clé API et le secret sont actuellement utilisés uniquement pour télécharger l'utilisation du widget. Le préréglage de téléchargement est également utilisé pour les widgets de téléchargement.

Téléchargement d'exemples d'images

Afin d'exécuter le projet DOCS, vous devez faire référence aux images disponibles à l'intérieur de votre compte cloudinary.

Pour ce faire, accédez au répertoire scripts et créez d'abord un nouveau fichier .env avec:

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

Ensuite, exécutez le script de téléchargement avec:

 pnpm upload

Par défaut, les images à l'intérieur de scripts/images.json seront téléchargées dans le répertoire "Images" à l'intérieur de votre compte Cloudinary. Pour modifier l'emplacement, ajoutez la variable d'environnement CLOUDINARY_IMAGES_DIRECTORY avec votre répertoire préféré:

 CLOUDINARY_IMAGES_DIRECTORY="<Your Directory>"

Exécuter le projet

Une fois installé et configuré, ouvrez les onglets à deux terminaux, en naviguant un vers next-cloudinary et un sur docs , exécutant la commande suivante dans chacun:

 pnpm dev

Le projet sera désormais disponible sur https: // localhost: 3000 ou le port local configuré.

Tests en cours d'exécution

Tous les tests sont situés à l'intérieur des next-cloudinary/tests avec une structure de répertoire qui devraient refléter next-cloudinary/src .

À l'intérieur next-cloudinary , effectuez des tests avec:

 pnpm test

Contributeurs

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	Silare sahil
Yash Mathur	Abdul Samad	Rishav chattopadhyay	Prathamesh Gawas	Victoire de Nwani	Pratyay Banerjee	Saai Syvendra