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

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

github.com/transloadit开发588 次安装1 周前更新
代码仓库

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

为 Next.js App Router 项目接入 Transloadit Smart CDN 签名 URL 的技能，说明服务端配置方式，并提供用于检查 URL 的示例页面。

主要功能

  1. 01在服务端签署 Smart CDN URL
  2. 02配置 workspace、template 和 input
  3. 03将 Transloadit 密钥保留在服务端
  4. 04添加可选演示页面

适用场景

  1. 01通过 Smart CDN 提供已配置的公开资源
  2. 02为获授权的私有资源返回短时有效 URL
  3. 03通过 Next.js 路由验证签名 URL

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/transloadit/skills --skill integrate-asset-delivery-with-transloadit-smartcdn-in-nextjs

安装后在 Claude Code 中输入/integrate-asset-delivery-with-transloadit-smartcdn-in-nextjs确认已加载。

详细介绍

输入

  • 必需的环境变量（仅服务端）：TRANSLOADIT_KEY、TRANSLOADIT_SECRET、 TRANSLOADIT_SMARTCDN_WORKSPACE、TRANSLOADIT_SMARTCDN_TEMPLATE 和 TRANSLOADIT_SMARTCDN_INPUT

本地开发时，将这些变量放入 .env.local。切勿将 TRANSLOADIT_SECRET 暴露给浏览器。

使用由 TRANSLOADIT_SMARTCDN_WORKSPACE 拥有的 Template，并为 TRANSLOADIT_SMARTCDN_INPUT 指定固定的资源或存储路径。不要使用接受任意源 URL 的共享 Template。如果工作区 Template 通过 HTTP 导入内容，请在 Template 中限制其源和路径，而不是接受请求中的任意 URL。

安装

npm i @transloadit/utils

实现（App Router）

选择根目录：

  • 如果项目包含 src/app，请使用 src/app/...
  • 否则使用 app/...

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

创建 app/api/smartcdn/route.ts（如果使用 src/，则创建 src/app/api/smartcdn/route.ts）：

import { NextResponse } from 'next/server'
import { getSignedSmartCdnUrl } from '@transloadit/utils/node'

export const runtime = 'nodejs'

function getRequiredEnv(name: string): string {
  const value = process.env[name]
  if (!value) throw new Error(`Missing required env var: ${name}`)
  return value
}

export async function GET() {
  try {
    const authKey = getRequiredEnv('TRANSLOADIT_KEY')
    const authSecret = getRequiredEnv('TRANSLOADIT_SECRET')
    const workspace = getRequiredEnv('TRANSLOADIT_SMARTCDN_WORKSPACE')
    const template = getRequiredEnv('TRANSLOADIT_SMARTCDN_TEMPLATE')
    const input = getRequiredEnv('TRANSLOADIT_SMARTCDN_INPUT')

    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 })
  }
}

此路由会为一个由服务端配置的公开资源签名。不要将 workspace、template 或 input 替换为未经检查的查询或请求体值。对于私有资源，在返回短时有效的 URL 之前，请先对调用方进行身份验证和授权。

2) 可选：简易演示页面

创建 app/smartcdn/page.tsx（或 src/app/smartcdn/page.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/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/smartcdn。
  • 预期返回包含 url 和已配置 { workspace, template, input } 的 JSON。

参考资料（内部）

  • 可用的参考实现：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 签名）

评论

支持 Markdown