next cloudinary

Siguiente nube

indefinido

Entrega y carga de imágenes de alto rendimiento a escala en Next.js alimentado por Cloudinary.

Características • Introducción • Comunidad y apoyo • Contribuir

Esta es una biblioteca comunitaria apoyada por el equipo de experiencia en el desarrollador nube.

Características

• Optimizar automáticamente las imágenes y entregar en formatos modernos
• Eliminar fondos de las imágenes
• Agregar dinámicamente las imágenes de imagen y texto a las imágenes
• Cultivo y cambio de tamaño a base de IA
• Transformar imágenes usando color y efectos
• Generar tarjetas de redes sociales de gráfico abierto en la marcha
• Widget de carga
• ... todo a escala con nube

Empezando

Instalación

• Instale next-cloudinary con:

 npm install next-cloudinary

• Agregue una variable de entorno con su nombre de nube:

 NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

Agregar una imagen

 import { CldImage } from 'next-cloudinary';

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

Obtenga más información sobre ClDimage en los próximos documentos nube

Generar una tarjeta de redes sociales (gráfico abierto)

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

Nota: El ancho y la altura no se requieren (o se recomienda) para cumplir con el tamaño de la tarjeta de redes sociales estandarizadas de una relación de aspecto 2: 1.

Obtenga más información sobre ClDogimage en los próximos documentos nube

Otros casos de uso

• Eliminación de antecedentes
• Superposición de la imagen
• Imagen subrayado
• Tarjeta de redes sociales
• Superposiciones de texto

❤️ Comunidad y apoyo

• GitHub: crear un problema
• Twitter: @colbyfayock

? Que contribuye

Lea Contriping.MD antes de contribuir.

Trabajando localmente

Instalación

Este proyecto está utilizando PNPM como una forma de administrar dependencias y espacios de trabajo.

Con el proyecto clonado, instale las dependencias desde la raíz del proyecto con:

 pnpm install

Configuración

Para trabajar en el proyecto, debe tener una cuenta nube activa. Con la cuenta, configure un archivo .env.local dentro de docs con:

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

Nota: La cuenta nube puede ser gratuita, pero algunas características pueden no funcionar más allá de nivel gratuito como la eliminación de fondo

El nombre de la nube es necesario para todo el uso, donde la clave API y el secreto actualmente solo se usan para el uso de widget de carga. El preajuste de carga se usa adicionalmente para los widgets de carga.

Subiendo imágenes de ejemplo

Para ejecutar el proyecto DOCS, debe tener las imágenes a las que se hace referencias dentro de su cuenta nube.

Para hacer esto, navegue al directorio scripts y primero cree un nuevo archivo .env con:

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

Luego ejecute el script de carga con:

 pnpm upload

Por defecto, las imágenes dentro de scripts/images.json se cargarán en el directorio "Imágenes" dentro de su cuenta nube. Para cambiar la ubicación, agregue la variable de entorno CLOUDINARY_IMAGES_DIRECTORY con su directorio preferido:

 CLOUDINARY_IMAGES_DIRECTORY="<Your Directory>"

Ejecutando el proyecto

Una vez instalado y configurado, abra dos pestañas de terminal, navegando una a next-cloudinary y otra a docs , ejecutando el siguiente comando en cada:

 pnpm dev

El proyecto ahora estará disponible en https: // localhost: 3000 o el puerto local configurado.

Pruebas de ejecución

Todas las pruebas se encuentran dentro de next-cloudinary/tests con una estructura de directorio que debe reflejar next-cloudinary/src .

Mientras esté dentro de next-cloudinary , ejecute pruebas con:

 pnpm test

Colaboradores

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	Jacobo	Matheus Cabral	Jose Morales	Eric Pfister	Joshua Olorunnipa	Harina
Shoaib asgar	Adeyanju Adeyemi	Simón	Richard Oliver Bray	zecka	Vashisht duro	Sahil Silare
Yash Mathur	Abdul Samad	Rishav Chattopadhyay	Prathamesh Gawas	Victoria de Nwani	Pratyay Banerjee	Saai Syvendra