Environment variables not working (Next.JS 9.4.4)

You can't make this kind of request from the client-side without exposing your API credentials. You have to have a backend.

You can use Next.js /pages/api to make a request to Contentful and then pass it to your front-end.

Just create a .env file, add variables and reference it in your API route as following:

process.env.CONTENTFUL_SPACE_ID

Since Next.js 9.4 you don't need next.config.js for that.

By adding the variables to next.config.js you've exposed the secrets to client-side. Anyone can see these secrets.

New Environment Variables Support

Create a Next.js App with Contentful and Deploy It with Vercel

Blog example using Next.js and Contentful

I recomended to update at nextjs 9.4 and up, use this example:

.env.local
NEXT_PUBLIC_SECRET_KEY=i7z7GeS38r10orTRr1i

and in any part of your code you could use:

.js
const SECRET_KEY = process.env.NEXT_PUBLIC_SECRET_KEY

note that it must be the same name of the key "NEXT_PUBLIC_ SECRET_KEY" and not only "SECRET_KEY"

and when you run it make sure that in the log says

$ next dev
Loaded env from E:\awesome-project\client\.env.local
ready - started server on http://localhost:3000
...

To read more about environment variables see this link