import Head from 'next/head'; import { Callout, Steps, Tab, Tabs } from 'nextra-theme-docs';
import OgImage from '../components/OgImage';
import { CldImage } from '../../next-cloudinary'; import { OG_IMAGE_WIDTH, OG_IMAGE_HEIGHT } from '../../next-cloudinary/src/constants/sizes';
<title>Installation - Next Cloudinary</title><Tabs items={['npm', 'pnpm', 'yarn']}>
npm install next-cloudinary
pnpm install next-cloudinary
yarn add next-cloudinary
Add the following variable to your .env.local or .env file.
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"
You can find more detailed instructions for components that may require other configuration such as an API key on the component's Basic Usage page.
Learn how to add one of the Next Cloudinary components:
- CldImage: Optimize Cloudinary images with ready-to-use transformations
- CldOgImage: Easy-to-use OG Image and Social Media Cards
- CldUploadButton: Drop-in button that opens the Cloudinary Upload Widget
- CldUploadWidget: Cloudinary Upload Widget with a customizable UI
- CldVideoPlayer: Deliver Cloudinary video assets with a customizable player
Or use the helper methods to generate URLs:
- getCldImageUrl: Construct a Cloudinary image URL using the same API as CldImage
- getCldOgImageUrl: Create a Cloudinary image URL specifically for OG Images or Social Media Cards