Install

Setup guide

Install ImgNave in Next.js

Add the SDK, drop in your project values, and keep using your existing next/image components.

API Key

Create in API key

Project ID

Select a project

CDN URL

https://pz001.imgnave.com

Install the SDK

Run inside your existing Next.js app.

terminal

npm install @imgnave/next
npx imgnave init

Set environment variables

Add these to your deployment environment

.env.local

IMGNAVE_API_KEY=imgnave_live_paste_your_api_key_here
IMGNAVE_PROJECT_ID=paste_project_uuid_here
NEXT_PUBLIC_IMGNAVE_PROJECT_ID=paste_project_uuid_here
NEXT_PUBLIC_IMGNAVE_CDN_URL=https://pz001.imgnave.com

Set NEXT_PUBLIC_IMGNAVE_CDN_URL to https://pz001.imgnave.com, or use the custom domain you add in Custom Domain.

Update next.config

Wrap your existing config — Image components don't change.

next.config.mjs

import { withImgnave } from "@imgnave/next";
 
const nextConfig = {
  // your existing Next.js config
};
 
export default withImgnave(nextConfig);

Verify setup

Run this before deploying the first time.

terminal

npm run build

Preconnect to the image origin

Highly recommended - preconnect to the ImgNave origin so the browser opens the connection early and images start downloading sooner.

app/layout.tsx — <head>

<head>
  ...
  <link rel="preconnect" href="https://pz001.imgnave.com" crossOrigin="" />
  ...
</head>

How builds work

Production builds sync changed public images before Next.js bundles the manifest.

Deploy builds upload only changed public image assets.

The generated manifest is bundled into the Next.js build.

next/image keeps rendering through the ImgNave loader.

Remote Images through remotePatterns is not available yet. Will be available in future.