Skip to main content
Integration Guide

Add ImageLayer to Next.js

ImageLayer works in Next.js with both the App Router and Pages Router. The widget is a client-side Web Component, so mark the container as a Client Component with "use client" and import the package to expose image, video, voice, and text workflows.

Quick start

Install

npm install @imagelayer/widget

Embed

jsx 
'use client';
import '@imagelayer/widget';

export default function ImageGenerator() {
  return (
    <image-layer
      api-key="il_live_your_key_here"
      api-url="https://api.imagelayer.app"
    />
  );
}

Why Next.js + ImageLayer

App Router ready

Mark the component file with "use client" and the widget renders after hydration. Server Components pass the API key as a prop from environment variables.

SSR-safe

The widget only runs in the browser. It doesn't attempt to access DOM during server rendering, so no hydration mismatches.

Edge and Node runtimes

The widget itself is client-only. Your Next.js API routes (Edge or Node) can call the ImageLayer REST API directly if you need server-side generation.

How it works

01

Set up your brand kit

Upload logo, pick colors, set AI brand guidelines. Five minutes.

02

Embed the widget

Drop one <image-layer> tag into your Next.js app. That's the entire integration.

03

Your users start creating

Users open one embedded workflow and generate on-brand images, video, voiceovers, or text inside your product.

Start building with Next.js

Free plan. No credit card. Most teams go live in under 15 minutes.

Embed Your First Widget Free