integrate-asset-delivery-with-transloadit-smartcdn-in-nextjs

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Inputs

输入项

  • Required env (server-only):
    TRANSLOADIT_KEY
    ,
    TRANSLOADIT_SECRET
  • Optional env:
    TRANSLOADIT_SMARTCDN_WORKSPACE
    ,
    TRANSLOADIT_SMARTCDN_TEMPLATE
    ,
    TRANSLOADIT_SMARTCDN_INPUT
For local dev, put these in
.env.local
. Never expose
TRANSLOADIT_SECRET
to the browser.
  • 必填环境变量(仅服务端):
    TRANSLOADIT_KEY
    TRANSLOADIT_SECRET
  • 可选环境变量:
    TRANSLOADIT_SMARTCDN_WORKSPACE
    TRANSLOADIT_SMARTCDN_TEMPLATE
    TRANSLOADIT_SMARTCDN_INPUT
本地开发时,将这些变量放入
.env.local
中。切勿向浏览器暴露
TRANSLOADIT_SECRET

Install

安装

bash
npm i @transloadit/utils
bash
npm i @transloadit/utils

Implement (App Router)

实现(App Router)

Pick the root:
  • If your project has
    src/app
    , use
    src/app/...
  • Else use
    app/...
选择根目录:
  • 如果你的项目包含
    src/app
    ,使用
    src/app/...
  • 否则使用
    app/...

1) Server route: sign Smart CDN URLs

1) 服务端路由:为Smart CDN URL签名

Create
app/api/smartcdn/route.ts
(or
src/app/api/smartcdn/route.ts
if you use
src/
):
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.ts
(如果使用
src/
目录则创建
src/app/api/smartcdn/route.ts
):
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 })
  }
}

2) Optional: a tiny demo page

2) 可选:小型演示页面

Create
app/smartcdn/page.tsx
(or
src/app/smartcdn/page.tsx
):
tsx
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
app/smartcdn/smartcdn-demo.tsx
(or
src/app/smartcdn/smartcdn-demo.tsx
):
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>
  )
}
创建
app/smartcdn/page.tsx
(如果使用
src/
目录则创建
src/app/smartcdn/page.tsx
):
tsx
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.tsx
(如果使用
src/
目录则创建
src/app/smartcdn/smartcdn-demo.tsx
):
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>
  )
}

Quick Check

快速验证

  • Start dev server, then open
    /smartcdn
    or fetch
    /api/smartcdn
    .
  • Expect JSON including a
    url
    and your
    { workspace, template, input }
    .
  • 启动开发服务器,然后打开
    /smartcdn
    页面或请求
    /api/smartcdn
    接口。
  • 预期返回包含
    url
    以及你设置的
    { workspace, template, input }
    的JSON数据。

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签名)