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