Next.js应用使用Vercel Blob Storage时出现“No token found”错误

核心问题原因 #

客户端组件无法直接读取未加NEXT_PUBLIC_前缀的Vercel环境变量，且put方法需要显式传入token参数（即使同属一个Vercel项目，客户端上传仍需指定token）。

分步解决方案 #

• 修改环境变量命名
  将你的BLOB_READ_WRITE_TOKEN重命名为NEXT_PUBLIC_BLOB_READ_WRITE_TOKEN，因为客户端组件只能访问带NEXT_PUBLIC_前缀的环境变量。本地开发时把这个变量写入.env.local文件，Vercel部署时在项目设置的「环境变量」面板添加该变量。

• 在代码中传入token
  从环境变量读取token，并添加到put方法的options参数中：

'use client'

import { put } from "@vercel/blob";

interface recordingsInterface {
    run: number;
    blob: Blob;
}

// Store a blob 
export const storeRecording = async ({run, blob} : recordingsInterface) => {
    const path = `recordings/userXY/${run}.webm`;
    const blobToken = process.env.NEXT_PUBLIC_BLOB_READ_WRITE_TOKEN;

    if (!blobToken) {
        throw new Error("BLOB_READ_WRITE_TOKEN is not set");
    }

    const options  = {
        access: 'public',
        contentType: "video/webm",
        token: blobToken, // 显式传入token
    }

    const storedBlob = await put(path, blob, options);
    return storedBlob;
};

• 验证环境变量生效
  本地开发时需重启Next.js服务，确保新的环境变量被加载；部署到Vercel后，要确认环境变量已正确同步（可在Vercel部署日志中检查变量是否存在）。

额外注意事项 #

• 客户端上传使用的是读写token，确保你在Vercel Blob控制台生成的是具备读写权限的token。
• 虽然客户端上传支持大文件，但要注意Vercel Blob的单个文件大小限制（当前最大为5GB），以及浏览器端的上传超时问题。

内容的提问来源于stack exchange，提问作者Feldmanovitch