Integrate Asset Delivery With Transloadit Smartcdn In Nextjs

1---
2name: integrate-asset-delivery-with-transloadit-smartcdn-in-nextjs
3description: Add Transloadit Smart CDN URL signing to a Next.js App Router project (server-side signing route + optional client demo page).
4---
5 
6# Inputs
7 
8- Required env (server-only): `TRANSLOADIT_KEY`, `TRANSLOADIT_SECRET`
9- Optional env: `TRANSLOADIT_SMARTCDN_WORKSPACE`, `TRANSLOADIT_SMARTCDN_TEMPLATE`, `TRANSLOADIT_SMARTCDN_INPUT`
10 
11For local dev, put these in `.env.local`. Never expose `TRANSLOADIT_SECRET` to the browser.
12 
13# Install
14 
15```bash
16npm i @transloadit/utils
17```
18 
19# Implement (App Router)
20 
21Pick the root:
22- If your project has `src/app`, use `src/app/...`
23- Else use `app/...`
24 
25## 1) Server route: sign Smart CDN URLs
26 
27Create `app/api/smartcdn/route.ts` (or `src/app/api/smartcdn/route.ts` if you use `src/`):
28 
29```ts
30import { NextResponse } from 'next/server'
31import { getSignedSmartCdnUrl } from '@transloadit/utils/node'
32 
33export const runtime = 'nodejs'
34 
35function reqEnv(name: string): string {
36  const v = process.env[name]
37  if (!v) throw new Error(`Missing required env var: ${name}`)
38  return v
39}
40 
41export async function GET() {
42  try {
43    const authKey = reqEnv('TRANSLOADIT_KEY')
44    const authSecret = reqEnv('TRANSLOADIT_SECRET')
45 
46    const workspace = process.env.TRANSLOADIT_SMARTCDN_WORKSPACE || 'demo'
47    const template = process.env.TRANSLOADIT_SMARTCDN_TEMPLATE || 'serve-preview'
48    const input = process.env.TRANSLOADIT_SMARTCDN_INPUT || 'example.jpg'
49 
50    const url = getSignedSmartCdnUrl({ workspace, template, input, authKey, authSecret })
51 
52    return NextResponse.json({ url, workspace, template, input })
53  } catch (err) {
54    const message = err instanceof Error ? err.message : 'Unknown error'
55    return NextResponse.json({ error: message }, { status: 500 })
56  }
57}
58```
59 
60## 2) Optional: a tiny demo page
61 
62Create `app/smartcdn/page.tsx` (or `src/app/smartcdn/page.tsx`):
63 
64```tsx
65import SmartCdnDemo from './smartcdn-demo'
66 
67export default function SmartCdnPage() {
68  return (
69    <main style={{ padding: 24 }}>
70      <h1 style={{ fontSize: 20, fontWeight: 600 }}>Smart CDN Signed URL</h1>
71      <SmartCdnDemo />
72    </main>
73  )
74}
75```
76 
77Create `app/smartcdn/smartcdn-demo.tsx` (or `src/app/smartcdn/smartcdn-demo.tsx`):
78 
79```tsx
80'use client'
81 
82import { useEffect, useState } from 'react'
83 
84export default function SmartCdnDemo() {
85  const [payload, setPayload] = useState<unknown>(null)
86 
87  useEffect(() => {
88    let cancelled = false
89    fetch('/api/smartcdn', { cache: 'no-store' })
90      .then(async (res) => res.json())
91      .then((json) => {
92        if (!cancelled) setPayload(json)
93      })
94      .catch((err) => {
95        if (!cancelled) setPayload({ error: String(err) })
96      })
97    return () => {
98      cancelled = true
99    }
100  }, [])
101 
102  return (
103    <pre data-testid="smartcdn-json">
104      {payload ? JSON.stringify(payload, null, 2) : '(loading)'}
105    </pre>
106  )
107}
108```
109 
110# Quick Check
111 
112- Start dev server, then open `/smartcdn` or fetch `/api/smartcdn`.
113- Expect JSON including a `url` and your `{ workspace, template, input }`.
114 
115# References (Internal)
116 
117- Working reference implementation: `https://github.com/transloadit/skills/tree/main/scenarios/integrate-asset-delivery-with-transloadit-smartcdn-in-nextjs`
118 
119Tested with (see the scenario lockfile for the exact versions):
120- Next.js 16.1.6 (App Router)
121- React 19.2.3
122- @transloadit/utils 4.3.0 (Smart CDN signing)
123