Loading...
Loading...
Add Transloadit Smart CDN URL signing to a Next.js App Router project (server-side signing route + optional client demo page).
npx skill4agent add transloadit/skills integrate-asset-delivery-with-transloadit-smartcdn-in-nextjsTRANSLOADIT_KEYTRANSLOADIT_SECRETTRANSLOADIT_SMARTCDN_WORKSPACETRANSLOADIT_SMARTCDN_TEMPLATETRANSLOADIT_SMARTCDN_INPUT.env.localTRANSLOADIT_SECRETnpm i @transloadit/utilssrc/appsrc/app/...app/...app/api/smartcdn/route.tssrc/app/api/smartcdn/route.tssrc/import { NextResponse } from 'next/server'
import { getSignedSmartCdnUrl } from '@transloadit/utils/node'
export const runtime = 'nodejs'
function reqEnv(name: string): string {
const v = process.env[name]
if (!v) throw new Error(`Missing required env var: ${name}`)
return v
}
export async function GET() {
try {
const authKey = reqEnv('TRANSLOADIT_KEY')
const authSecret = reqEnv('TRANSLOADIT_SECRET')
const workspace = process.env.TRANSLOADIT_SMARTCDN_WORKSPACE || 'demo'
const template = process.env.TRANSLOADIT_SMARTCDN_TEMPLATE || 'serve-preview'
const input = process.env.TRANSLOADIT_SMARTCDN_INPUT || 'example.jpg'
const url = getSignedSmartCdnUrl({ workspace, template, input, authKey, authSecret })
return NextResponse.json({ url, workspace, template, input })
} catch (err) {
const message = err instanceof Error ? err.message : 'Unknown error'
return NextResponse.json({ error: message }, { status: 500 })
}
}app/smartcdn/page.tsxsrc/app/smartcdn/page.tsximport SmartCdnDemo from './smartcdn-demo'
export default function SmartCdnPage() {
return (
<main style={{ padding: 24 }}>
<h1 style={{ fontSize: 20, fontWeight: 600 }}>Smart CDN Signed URL</h1>
<SmartCdnDemo />
</main>
)
}app/smartcdn/smartcdn-demo.tsxsrc/app/smartcdn/smartcdn-demo.tsx'use client'
import { useEffect, useState } from 'react'
export default function SmartCdnDemo() {
const [payload, setPayload] = useState<unknown>(null)
useEffect(() => {
let cancelled = false
fetch('/api/smartcdn', { cache: 'no-store' })
.then(async (res) => res.json())
.then((json) => {
if (!cancelled) setPayload(json)
})
.catch((err) => {
if (!cancelled) setPayload({ error: String(err) })
})
return () => {
cancelled = true
}
}, [])
return (
<pre data-testid="smartcdn-json">
{payload ? JSON.stringify(payload, null, 2) : '(loading)'}
</pre>
)
}/smartcdn/api/smartcdnurl{ workspace, template, input }https://github.com/transloadit/skills/tree/main/scenarios/integrate-asset-delivery-with-transloadit-smartcdn-in-nextjs