Render product mockups with Next.js

npm install sudomock

pnpm add sudomock

yarn add sudomock

bun add sudomock

import SudoMock, { SudoMockError } from 'sudomock'

const sudomock = new SudoMock()

const MOCKUP = '8f2c1d90-6b4e-4a37-9e55-0d1c7a3f21b8'
const SMART_OBJECT = 'b41a7e52-93c8-4d61-8f07-2ae5c9d04713'

export async function POST(request: Request) {
  const { artworkUrl } = await request.json()

  try {
    const render = await sudomock.renders.create({
      mockupId: MOCKUP,
      smartObjects: [
        { uuid: SMART_OBJECT, asset: { url: artworkUrl } },
      ],
      exportOptions: { imageFormat: 'webp', imageSize: 1600 },
    })

    return Response.json({ url: render.url })
  } catch (error) {
    if (error instanceof SudoMockError) {
      return Response.json(
        { error: error.code },
        { status: error.status || 502 },
      )
    }
    throw error
  }
}

import type { NextApiRequest, NextApiResponse } from 'next'
import SudoMock, { SudoMockError } from 'sudomock'

const sudomock = new SudoMock()

const MOCKUP = '8f2c1d90-6b4e-4a37-9e55-0d1c7a3f21b8'
const SMART_OBJECT = 'b41a7e52-93c8-4d61-8f07-2ae5c9d04713'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const { artworkUrl } = req.body

  try {
    const render = await sudomock.renders.create({
      mockupId: MOCKUP,
      smartObjects: [
        { uuid: SMART_OBJECT, asset: { url: artworkUrl } },
      ],
      exportOptions: { imageFormat: 'webp', imageSize: 1600 },
    })

    res.status(200).json({ url: render.url })
  } catch (error) {
    if (error instanceof SudoMockError) {
      res.status(error.status || 502).json({ error: error.code })
      return
    }
    throw error
  }
}