integrate-asset-delivery-with-transloadit-smartcdn-in-nextjs
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseInputs
输入项
- Required env (server-only): ,
TRANSLOADIT_KEYTRANSLOADIT_SECRET - Optional env: ,
TRANSLOADIT_SMARTCDN_WORKSPACE,TRANSLOADIT_SMARTCDN_TEMPLATETRANSLOADIT_SMARTCDN_INPUT
For local dev, put these in . Never expose to the browser.
.env.localTRANSLOADIT_SECRET- 必填环境变量(仅服务端):、
TRANSLOADIT_KEYTRANSLOADIT_SECRET - 可选环境变量:、
TRANSLOADIT_SMARTCDN_WORKSPACE、TRANSLOADIT_SMARTCDN_TEMPLATETRANSLOADIT_SMARTCDN_INPUT
本地开发时,将这些变量放入中。切勿向浏览器暴露。
.env.localTRANSLOADIT_SECRETInstall
安装
bash
npm i @transloadit/utilsbash
npm i @transloadit/utilsImplement (App Router)
实现(App Router)
Pick the root:
- If your project has , use
src/appsrc/app/... - Else use
app/...
选择根目录:
- 如果你的项目包含,使用
src/appsrc/app/... - 否则使用
app/...
1) Server route: sign Smart CDN URLs
1) 服务端路由:为Smart CDN URL签名
Create (or if you use ):
app/api/smartcdn/route.tssrc/app/api/smartcdn/route.tssrc/ts
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/api/smartcdn/route.tssrc/src/app/api/smartcdn/route.tsts
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 })
}
}2) Optional: a tiny demo page
2) 可选:小型演示页面
Create (or ):
app/smartcdn/page.tsxsrc/app/smartcdn/page.tsxtsx
import 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>
)
}Create (or ):
app/smartcdn/smartcdn-demo.tsxsrc/app/smartcdn/smartcdn-demo.tsxtsx
'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>
)
}创建(如果使用目录则创建):
app/smartcdn/page.tsxsrc/src/app/smartcdn/page.tsxtsx
import 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/src/app/smartcdn/smartcdn-demo.tsxtsx
'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>
)
}Quick Check
快速验证
- Start dev server, then open or fetch
/smartcdn./api/smartcdn - Expect JSON including a and your
url.{ workspace, template, input }
- 启动开发服务器,然后打开页面或请求
/smartcdn接口。/api/smartcdn - 预期返回包含以及你设置的
url的JSON数据。{ workspace, template, input }
References (Internal)
参考资料(内部)
- Working reference implementation:
https://github.com/transloadit/skills/tree/main/scenarios/integrate-asset-delivery-with-transloadit-smartcdn-in-nextjs
Tested with (see the scenario lockfile for the exact versions):
- Next.js 16.1.6 (App Router)
- React 19.2.3
- @transloadit/utils 4.3.0 (Smart CDN signing)
- 可用的参考实现:
https://github.com/transloadit/skills/tree/main/scenarios/integrate-asset-delivery-with-transloadit-smartcdn-in-nextjs
已测试版本(具体版本请查看场景锁文件):
- Next.js 16.1.6 (App Router)
- React 19.2.3
- @transloadit/utils 4.3.0 (Smart CDN签名)