Next.js Discord

Discord Forum

Spotify API / Next 13 failing on Vercel

Unanswered
Blanc de Hotot posted this in #help-forum
Open in Discord
Blanc de HototOP
hi there, having a little trouble debugging an issue. in local, everything works great and i'm also able to build locally. but once i push to vercel, the build fails.

it says mostRecentSong is undefined, even if it is defined – the array will never be empty.

here's the code

const RECENTLY_PLAYED_ENDPOINT = `https://api.spotify.com/v1/me/player/recently-played`;

const getRecentTracks = async () => {
  const { access_token } = await getSpotifyAccessToken();

  const response = fetch(RECENTLY_PLAYED_ENDPOINT, {
    headers: {
      Authorization: `Bearer ${access_token}`,
    },
  });
  if (!response) throw new Error("Something went wrong");

  const songs = await response.then((res) => res.json());

  const mostRecentSong = songs.items[0];
  const coverArt = mostRecentSong.track.album.images[0].url;
  const previewUrl = mostRecentSong.track.preview_url;
  const title = mostRecentSong.track.name;
  const artist = mostRecentSong.track.artists
    .map(
      (_artist: { name: string; external_urls: { spotify: string } }) =>
        _artist.name
    )
    .shift();
  const songUrl = mostRecentSong.track.external_urls.spotify;

  const track = {
    previewUrl,
    title,
    artist,
    songUrl,
    coverArt,
  };

  return track;
};

0 Replies