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 経由でインポートする場合は、リクエストから任意の URL を受け付けるのではなく、Template 内でオリジンとパスを制限してください。

インストール

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

このルートでは、サーバーで設定された公開アセット 1 つに署名します。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

以下の環境でテスト済みです（正確なバージョンはシナリオの lockfile を参照してください）。

• Next.js 16.1.6（App Router）
• React 19.2.3
• @transloadit/utils 4.3.0（Smart CDN の署名）