调用btoa与item.slice方法失败，Spotify接口请求遇问题

一、修复Base64编码（btoa/Buffer报错） #

你使用的是Next.js Edge Runtime，btoa是浏览器专属API，Edge环境不支持；Buffer报错主要是两个原因：要么环境变量未正确加载导致拼接字符串含undefined，要么Buffer的使用方式不符合Edge规范。

正确的Base64编码实现 #

替换原有的const basic = btoa(...)，改用Edge兼容的编码方式，同时先校验环境变量是否有效：

const client_id = process.env.SPOTIFY_CLIENT_ID;
const client_secret = process.env.SPOTIFY_CLIENT_SECRET;
const refresh_token = process.env.SPOTIFY_REFRESH_TOKEN;

// 先校验环境变量是否配置完整
if (!client_id || !client_secret || !refresh_token) {
  throw new Error("Spotify环境变量未正确配置");
}

// Edge Runtime兼容的Base64编码写法
const basic = Buffer.from(`${client_id}:${client_secret}`, 'utf8').toString('base64');

环境变量配置注意事项 #

• 确保项目根目录的.env.local文件正确写入变量：

  SPOTIFY_CLIENT_ID=你的客户端ID
  SPOTIFY_CLIENT_SECRET=你的客户端密钥
  SPOTIFY_REFRESH_TOKEN=你的刷新令牌
  

• Edge环境下，敏感变量不要加NEXT_PUBLIC_前缀，避免暴露给前端；若需在Edge函数中读取，无需额外配置next.config.js，Next.js会自动加载.env.local中的变量。

二、修复热门曲目脚本报错 #

原脚本未处理API响应的错误状态（比如令牌无效导致的401），导致解析items时抛出异常。修改如下：

1. 完善令牌获取的错误处理 #

const getAccessToken = async () => {
  const response = await fetch(TOKEN_ENDPOINT, {
    method: 'POST',
    headers: {
      Authorization: `Basic ${basic}`,
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({
      grant_type: 'refresh_token',
      refresh_token
    })
  });

  if (!response.ok) {
    throw new Error(`获取令牌失败：${response.status} ${response.statusText}`);
  }

  return response.json();
};

2. 完善热门曲目接口的错误捕获 #

export default async function handler(req: NextRequest) {
  try {
    const response = await getTopTracks();
    
    if (!response.ok) {
      throw new Error(`获取热门曲目失败：${response.status} ${response.statusText}`);
    }

    const { items } = await response.json();

    const tracks = items.slice(0, 10).map((track) => ({
      artist: track.artists.map((_artist) => _artist.name).join(', '),
      songUrl: track.external_urls.spotify,
      title: track.name
    }));

    return new Response(JSON.stringify({ tracks }), {
      status: 200,
      headers: {
        'content-type': 'application/json',
        'cache-control': 'public, s-maxage=86400, stale-while-revalidate=43200'
      }
    });
  } catch (error) {
    return new Response(JSON.stringify({ error: error.message }), {
      status: 500,
      headers: {
        'content-type': 'application/json'
      }
    });
  }
}

三、嵌入自定义Spotify播放器 #

要在网站嵌入播放器，可使用Spotify官方的Embed功能：

• 从Spotify客户端获取嵌入代码：右键目标歌曲/播放列表 → 分享 → 复制嵌入代码，直接粘贴到页面中
• 或动态生成iframe，格式为：

<iframe
  src="https://open.spotify.com/embed/track/你的曲目ID"
  width="300"
  height="380"
  frameborder="0"
  allowtransparency="true"
  allow="encrypted-media"
></iframe>

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