next cloudinary

Próximo Cloudinary

indefinido

Entrega e upload de imagem de alto desempenho em escala em Next.js alimentado pelo Cloudinary.

Recursos • Introdução • Comunidade e suporte • Contribuindo

Esta é uma biblioteca comunitária suportada pela equipe de experiência em desenvolvedores em nuvem.

Características

• Otimize automaticamente imagens e entregue em formatos modernos
• Remova fundos das imagens
• Adicione dinamicamente as sobreposições de imagem e texto às imagens
• Cropping e redimensionamento baseado em IA
• Transforme imagens usando cores e efeitos
• Gerar cartões de mídia social em gráfico aberto em tempo real
• Widget de upload de queda
• ... tudo em escala com nuvem

Começando

Instalação

• Instale next-cloudinary com:

 npm install next-cloudinary

• Adicione uma variável de ambiente com o nome da sua nuvem:

 NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

Adicionando uma imagem

 import { CldImage } from 'next-cloudinary';

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

Saiba mais sobre cldimage nos próximos documentos em nuvem

Gerando um cartão de mídia social (gráfico aberto)

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

Nota: A largura e a altura não são necessárias (ou recomendadas) para cumprir o dimensionamento padronizado de cartões de mídia social de uma proporção de 2: 1.

Saiba mais sobre o ClDogimage nos próximos documentos em nuvem

Outros casos de uso

• Remoção de fundo
• Sobreposições de imagem
• Imagem está subjacente
• Cartão de mídia social
• Sobreposições de texto

❤️ Comunidade e apoio

• Github: Crie um problema
• Twitter: @colbyfayock

? Contribuindo

Leia contribuindo.md antes de contribuir.

Trabalhando localmente

Instalação

Este projeto está usando o PNPM como uma maneira de gerenciar dependências e espaços de trabalho.

Com o projeto clonado, instale as dependências da raiz do projeto com:

 pnpm install

Configuração

Para trabalhar no projeto, você precisa ter uma conta em nuvem ativa. Com a conta, configure um arquivo .env.local dentro de docs com:

 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: A conta Cloudinary pode ser gratuita, mas alguns recursos podem não funcionar além da remoção gratuita de camadas, como o fundo

O nome da nuvem é necessário para todo o uso, onde a chave da API e o segredo atualmente são usados apenas para fazer upload de uso do widget. A predefinição de upload é usada adicionalmente para os widgets de upload.

Carregando imagens de exemplo

Para executar o projeto DOCS, você precisa ter as imagens referenciadas disponíveis dentro da sua conta em nuvem.

Para fazer isso, navegue até o diretório scripts e primeiro crie um novo arquivo .env com:

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

Em seguida, execute o script de upload com:

 pnpm upload

Por padrão, as imagens dentro do scripts/images.json serão enviadas para o diretório "Images" dentro da sua conta em nuvem. Para alterar o local, adicione a variável de ambiente CLOUDINARY_IMAGES_DIRECTORY com seu diretório preferido:

 CLOUDINARY_IMAGES_DIRECTORY="<Your Directory>"

Executando o projeto

Depois de instalado e configurado, abra duas guias do terminal, navegando em uma para next-cloudinary e outro para docs , executando o seguinte comando em cada um:

 pnpm dev

O projeto agora estará disponível em https: // localhost: 3000 ou a porta local configurada.

Testes de execução

Todos os testes estão localizados dentro do next-cloudinary/tests com uma estrutura de diretório que deve refletir next-cloudinary/src .

Enquanto dentro next-cloudinary , execute os testes com:

 pnpm test

Colaboradores

Colby Fayock	Daniel Olavi	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	Vitória de Nwani	Pratyay Banerjee	Saai Syvendra