ImgNave Next.js SDK

ImgNave syncs images from a Next.js public directory and plugs a custom loader into next/image for production builds.

Learn more at imgnave.com.

Install

npm install @imgnave/next
npx imgnave init

imgnave init creates imgnave.config.mjs only. It does not create .imgnave or a manifest.

Configure Next.js

next.config.mjs

import { withImgnave } from "@imgnave/next";

const nextConfig = {};

export default withImgnave(nextConfig);

During production next build, withImgnave automatically runs sync and writes the manifest to .imgnave/manifest.json.

Configure ImgNave

imgnave init generates:

export default {
  apiKey: process.env.IMGNAVE_API_KEY,
  projectId: process.env.IMGNAVE_PROJECT_ID || process.env.NEXT_PUBLIC_IMGNAVE_PROJECT_ID,
  cdnUrl: process.env.NEXT_PUBLIC_IMGNAVE_CDN_URL,
  publicDir: "public",
};

You can also provide values directly in this file. Environment variables are recommended for secrets and deploy-specific values, and they take precedence when both are set.

Required environment:

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

Run:

npx imgnave doctor

doctor checks the required credentials and CDN URL.

withImgnave also accepts SDK options:

export default withImgnave(nextConfig, {
  qualities: [50, 75, 85, 100],
});

Asset Handling

ImgNave scans image files under publicDir.

Optimizer-safe formats receive transform params:

jpg, jpeg, png, webp, gif

Other synced image assets, such as SVG or ICO, are uploaded and served from the CDN without width or quality params.