NextJS and Cloudinary Problems

Question

I have this problem in my console:

results { error: { message: 'unknown api_key' } }

It happens because I'm trying to get images from my Cloudinary account, I've verified my cloud name, api key, api secret.

The problem happens in this part of my code:

export async function getStaticProps() {
    const results = await     fetch(`https://api.cloudinary.com/v1_1/${process.env.CLOUDINARY_CLOUD_NAME}/resources/image`, {
        headers: {
            Authorization: `Basic ${Buffer.from(process.env.CLOUDINARY_API_KEY + ':' + process.env.CLOUDINARY_API_SECRET).toString('base64')}`
        }
    }).then(r => r.json());

    console.log('results', results);
    return {
        props: {

        }
    }
}

This is my .env.local

CLOUDINARY_CLOUD_NAME="mycloudinary"
CLOUDINARY_API_KEY="mykey"
CLOUDINARY_API_SECRET="mysecret"

If someone could help me please!!

Answer 1

It seems there is a typo here. You're using NEXT_CLOUDINARY_API_KEY instead of CLOUDINARY_API_KEY, which is the variable name specified in your .env.local file.

Replace NEXT_CLOUDINARY_API_KEY with CLOUDINARY_API_KEY.

Authorization: `Basic ${Buffer.from(process.env.CLOUDINARY_API_KEY + ':' + process.env.CLOUDINARY_API_SECRET).toString('base64')}`

Answer 2

You should be able to resolve it by removing the quotes from around the values in your .env file.

In addition, worth logging the value of all ENV variables in your function to ensure they do actually have a value set that you expect and is accessible.