@pixelstackai/nextjs

Next.js components for Pixelstack: render your designs with next/image, with signed URLs built on the server.

Requires Next.js 15 or later, with the App Router.

Install

npm install @pixelstackai/nextjs

Set your team ID, and your signing secret if your designs require signed URLs, as environment variables:

PIXELSTACK_TEAM_ID=your-team-id
PIXELSTACK_SIGNING_SECRET=your-signing-secret

Find them in Team settings in the Pixelstack app.

Allow images from the Pixelstack CDN in next.config.ts:

import type { NextConfig } from 'next';
import { remotePatterns } from '@pixelstackai/nextjs/config';

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [...remotePatterns],
  },
};

export default nextConfig;

Usage

import { PixelstackImage } from '@pixelstackai/nextjs';

export default function Page() {
  return (
    <PixelstackImage
      src="my-design"
      alt="Welcome banner"
      width={1200}
      height={630}
      data={{ title: { text: 'Hello World' } }}
      variables={{ 'profile-url': 'https://example.com/ada' }}
    />
  );
}

src is the design's ID, data sets values on its objects, by object ID and property, and variables sets the variables of its workflow, by variable ID. Every other prop is passed to next/image.

PixelstackImage is an async server component, so your signing secret never reaches the browser. It can't be used in client components.

To build URLs yourself, use the @pixelstackai/client client, which this package depends on.

Documentation

See docs.pixelstack.io.

License

MIT