help

[latent spear]

Hi @magic bobcat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Your code is a Next.js API route that fetches an access token from Spotify's API and then uses that token to fetch a playlist. If successful, it returns two random tracks from that playlist. If there's an error at any point, it returns a 500 status with the error message.

Here's a breakdown of what your code does:

1. It imports the necessary types and libraries. NextApiRequest and NextApiResponse are types from Next.js used for typing the request and response in your API route. axios is a promise-based HTTP client for making requests.

2. The getSpotifyAccessToken function makes a POST request to Spotify's token endpoint to get an access token. It sends the client ID and client secret as part of the Authorization header.

3. The default exported function handler is your API route. It's an async function that takes a request and a response.

4. Inside handler, it first calls getSpotifyAccessToken to get an access token.

5. It then makes a GET request to a Spotify playlist endpoint, passing the access token in the Authorization header.

6. It gets the tracks from the response, picks two at random, and sends them back in the response with a 200 status.

7. If there's an error at any point, it catches it and sends a 500 status with the error message.

Remember to validate and handle the data you receive from the Spotify API appropriately. The body of NextApiRequest is any because the client may include any payload. You should validate the type/shape of the body at runtime before using it (source (https://nextjs.org/docs/pages/building-your-application/routing/api-routes#adding-typescript-types)).

Also, ensure that your environment variables (process.env.SPOTIFY_CLIENT_ID and process.env.SPOTIFY_CLIENT_SECRET) are correctly set up in your Next.js application.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@magic bobcat kapa.ai is still learning and improving, please let us know how it did by reacting below

[magic bobcat]

import type { NextApiRequest, NextApiResponse } from "next";
import axios from "axios";

async function getSpotifyAccessToken() {
    const response = await axios.post(
        "https://accounts.spotify.com/api/token",
        null,
        {
            params: {
                grant_type: "client_credentials",
            },
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
                Authorization: `Basic ${Buffer.from(
                    `${process.env.SPOTIFY_CLIENT_ID}:${process.env.SPOTIFY_CLIENT_SECRET}`
                ).toString("base64")}`,
            },
        }
    );
    return response.data.access_token;
}

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    try {
        const accessToken = await getSpotifyAccessToken();
        console.log({ accessToken });
        const response = await axios.get(
            `https://open.spotify.com/playlist/6E34Ag3EQHCOdjY10gFogj?si=5822e634bf0845a1/`,
            {
                headers: {
                    Authorization: `Bearer ${accessToken}`,
                },
            }
        );
        const tracks = response.data.items;
        const randomTracks = tracks.sort(() => 0.5 - Math.random()).slice(0, 2);
        res.status(200).json(randomTracks);
    } catch (error: any) {
        res.status(500).json({ error: error.message });
    }
}

GET http://localhost:3000/api/spotify 404 (Not Found)

Can you fix my code? @latent spear

[latent spear]

Let me check the knowledge base for you. One moment! :books:

---

Based on the information provided, it seems like your Next.js server is not able to find the route /api/spotify. Here are a few things you can check:

1. File Location: Make sure your file is located in the correct directory. In Next.js, API routes should be inside the pages/api directory. So, if you want to create a /api/spotify route, your file structure should look like this: pages/api/spotify.ts.

2. File Name: Ensure that your file is named correctly. If you're using TypeScript, your file should have a .ts extension (e.g., spotify.ts).

3. Server Running: Make sure your Next.js server is running. You can start it with npm run dev or yarn dev.

4. Correct Export: Ensure that you're exporting your API route handler correctly. It should be a default export. From your code, it seems like you're doing this correctly.

If you've checked all of these and you're still having issues, there might be a problem elsewhere in your application. Unfortunately, without more information, it's hard to provide a more specific solution.

Remember, the code you've shared involves sensitive data (Spotify Client ID and Secret). Make sure these are securely stored and not shared or exposed. You can use environment variables to securely store these values, as you've done in your code.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: