NxDeveloper guide

Generate product mockups with Next.js

Generate product mockups with Next.js by calling the SudoMock render endpoint from a Route Handler or a Server Action. Your API key stays on the server, and the browser gets back a finished image URL. Start with 500 one-time renders, then choose a published monthly volume plan.

Your PSD renders with its Smart Objects, blend modes, smart filters, and perspective warp intact, plus editable text layers. It fits product configurators, print-on-demand storefronts, and any Next.js app that turns a user design into an on-product image.

Start Free, 500 CreditsRead the API Docs
2,000+open-licensed font families25parallel renders on Scale500free renders, no card5Krenders on Starter

Add your API key to .env.local

Grab an API key from your dashboard, then keep it in an environment variable. Every request authenticates with the x-api-key header.

Add your API key to .env.local
1# .env.local (server-only, never prefixed with NEXT_PUBLIC_)
2SUDOMOCK_API_KEY=sm_your_api_key

Render from a Route Handler

One POST to the render endpoint composites your design into the PSD template and returns a finished image URL. Smart Objects, blend modes, smart filters, and perspective warp all render from your real file, so the output matches the template you built.

Render, Next.js
1// app/api/mockup/route.ts
2import { NextResponse } from "next/server";
3

4export async function POST(req: Request) {
5  const { designUrl } = await req.json();
6

7  const res = await fetch("https://api.sudomock.com/api/v1/renders", {
8    method: "POST",
9    headers: {
10      "Content-Type": "application/json",
11      // Read on the server only, so the key never reaches the browser.
12      "x-api-key": process.env.SUDOMOCK_API_KEY!,
13    },
14    body: JSON.stringify({
15      mockup_uuid: "c315f78f-d2c7-4541-b240-a9372842de94",
16      smart_objects: [
17        {
18          uuid: "128394ee-6758-4f2f-aa36-e2b19b152bd9",
19          asset: { url: designUrl, fit: "cover" },
20        },
21      ],
22      export_options: { image_format: "webp", image_size: 1920, quality: 90 },
23    }),
24  });
25

26  const { data } = await res.json();
27  return NextResponse.json({ url: data.print_files[0].export_path });
28}

How it works

  1. 1Upload a PSD once to get its mockup id and the ids of its Smart Objects and text layers.
  2. 2Read SUDOMOCK_API_KEY from the server environment inside a Route Handler or Server Action.
  3. 3Return data.print_files[0].export_path to the client and render it with next/image.

Personalize text layers from a Server Action

SudoMock renders the text layers in your PSD, so you can swap the wording, font, size, and color at render time and get back an image that keeps the look the designer built.

  • 2,000+ open-licensed font families, free for commercial use
  • Custom TTF and OTF font upload, up to 5 MB each, on Pro and Scale
  • Styled segments: mixed-style layers stay editable run by run
  • Box text: area text wraps inside its box and clips exactly as designed
Text layers, Next.js
1// app/actions.ts
2"use server";
3

4export async function renderPersonalized(headline: string) {
5  const res = await fetch("https://api.sudomock.com/api/v1/renders", {
6    method: "POST",
7    headers: {
8      "Content-Type": "application/json",
9      "x-api-key": process.env.SUDOMOCK_API_KEY!,
10    },
11    body: JSON.stringify({
12      mockup_uuid: "c315f78f-d2c7-4541-b240-a9372842de94",
13      text_layers: [
14        {
15          uuid: "b7f2c1a0-9e34-4d21-8f0a-1c2b3d4e5f60",
16          text: headline,
17          font: "Poppins-Bold",
18          font_size: 96,
19          color: "#C0392B",
20        },
21      ],
22    }),
23  });
24

25  const { data } = await res.json();
26  return data.print_files[0].export_path as string;
27}

Edit one mixed-style layer, run by run

When a single layer mixes styles, like a thin first name next to a bold surname, send a segments array with only the runs you want to change. Every run keeps its own font, size, and color, and any run you leave out stays as designed. This bundle of catalog, custom upload, per-segment styling, and box wrap over the API is what sets the text layers apart.

Styled segments request
1{
2  "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
3  "text_layers": [
4    {
5      "uuid": "b7f2c1a0-9e34-4d21-8f0a-1c2b3d4e5f60",
6      "segments": [
7        { "index": 0, "text": "Jane " },
8        { "index": 1, "text": "SMITH" }
9      ]
10    }
11  ]
12}

Full field reference and the fallback behavior when a font is not in your catalog live in the text layers documentation.

Frequently asked questions

How do I generate product mockups in a Next.js app?

Call https://api.sudomock.com/api/v1/renders from a Route Handler or a Server Action, with your API key in the x-api-key header read from the server environment. Return the finished image URL at data.print_files[0].export_path to the client and render it with next/image.

Where do I keep the API key in Next.js?

Put SUDOMOCK_API_KEY in .env.local without a NEXT_PUBLIC_ prefix, so it stays server-only. Only call the render endpoint from server code (Route Handlers, Server Actions, or server components), never from client components.

Can users personalize text before rendering?

Yes. Pass a text_layers array to the render call to swap wording, font, size, and color on named layers. The catalog carries 2,000+ open-licensed font families, and mixed-style layers stay editable segment by segment, which suits live product configurators.

Render your first Next.js mockup in minutes

Get 500 one-time API credits to test. No credit card required. See pricing for published monthly volumes and annual billing.

Start Free, 500 CreditsAll Integrations