@tuzzle/next

@tuzzle/next adds a next/image loader and server-side signing helpers, and re-exports the React components and hooks.

npm install @tuzzle/next

Image loader

createTuzzleLoader returns a loader you pass to next/image. Next then drives the width/quality props through Tuzzle's CDN.

import { createTuzzleLoader } from '@tuzzle/next'
import Image from 'next/image'

const loader = createTuzzleLoader({
  cdnUrl: 'https://cdn.tzzl.io',
  space: 'a1b2c3',
  format: 'webp',
})

export function Cover() {
  return <Image loader={loader} src="image-01HQ..." width={400} height={300} alt="Cover" />
}

The package also re-exports everything from @tuzzle/react (TuzzleProvider, TuzzleImage, TuzzleChooser, hooks) with the 'use client' directive applied.

Server-side signing

Import from @tuzzle/next/server to sign URLs for private / authenticated files. The signing secret stays on the server.

// app/api/tuzzle/sign/route.ts
import { createTuzzleSignatureHandler } from '@tuzzle/next/server'

const handler = createTuzzleSignatureHandler({
  cdnUrl: 'https://cdn.tzzl.io',
  space: 'a1b2c3',
  secret: process.env.TUZZLE_SIGNED_URL_SECRET!,
})

export const GET = handler
export const POST = handler

Or sign directly in a server component / route:

import { signTuzzleUrl } from '@tuzzle/next/server'

const url = await signTuzzleUrl(
  { cdnUrl: 'https://cdn.tzzl.io', space: 'a1b2c3', secret: process.env.TUZZLE_SIGNED_URL_SECRET! },
  'private/contract.pdf',
  { expiresIn: 1800 },
)