# Primeiros Passos

Por

Willyan Marques

●

Em 

Bibliotecas

●

Publicado 2024-04-04

Cloudinary é uma plataforma em nuvem para gerenciamento de imagens e vídeos. Ela atua inúmeros serviços de imagens e vídeos, como upload e armazemento, otimização e transformações com IA.

Uma das vantagens desse serviço é a possibilidade de integração com diversas stacks e os diversos componentes e funcionalidades oferecidos de maneira simples aos desenvolvedores. Além disso, também podemos utilizar o serviço gratuitamente a partir de um plano gratuito de nuvem.

Nessa documentação abordaremos apenas as funcionalidades principais de upload, fetching e otimização de imagens para o Next App Router. Caso você tenha interesse em outros serviços oferecidos, acesse a documentação oficial da Cloudinary.

Para instalar a biblioteca do Cloudinary no seu projeto next, utilize o comando abaixo na raiz do seu repositório.

npm install next-cloudinary

pnpm install next-cloudinary

yarn add next-cloudinary

Para você conseguir utilizar a biblioteca no seu projeto, primeiro você precisará criar uma nuvem para armazenar seus arquivos. No plano gratuito, você tem direito a utilizar até 25GB de espaço na sua nuvem.

Caso você esteja utilizando o Cloudinary pela primeira vez, acesse o site deles e crie uma conta. Você terá acesso imediato a um ambiente de gerenciamento da sua nuvem, onde você pode ver um guia de instalação para diversas stacks.

Procure pelo seu dashboard de nuvem, onde você poderá ver várias informações sobre a sua nuvem como o nome dela e suas chaves de API.

Antes de conseguir utilizar os serviços da nuvem, você precisa definir uma rota api pra integrar o seu projeto com a nuvem. Primeiro, você deve acessar o arquivo .env do seu repositório e colocar as informações da sua nuvem presentes no seu dashboard no site da Cloudinary.

//...
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME = "<Cloud name>";
NEXT_PUBLIC_CLOUDINARY_API_KEY = "<API key>";
CLOUDINARY_API_SECRET = "<API secret>";

Para configurar o endpoint, crie uma pasta nomeada cloudinary (qualquer nome serve) dentro de src/app/api, crie um arquivo route.ts e adicione a definação do método POST para uploads de arquivos:

import { v2 as cloudinary } from "cloudinary";

cloudinary.config({
  cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

export async function POST(request: Request) {
  const body = (await request.json()) as {
    paramsToSign: Record<string, string>;
  };
  const { paramsToSign } = body;

  const signature = cloudinary.utils.api_sign_request(
    paramsToSign,
    process.env.CLOUDINARY_API_SECRET!
  );

  return Response.json({ signature });
}