How to setup NextJS to work with images hosted on Contentful

Oscar de la Hera Gomez
Two flowers that represents NextJS and Contentful side by side with the text "Setup Images Hostname” beneath it.

To resolve hostname is not configured, update the next.config file to include the details of the image provide in the images > remotePatterns array.

A screenshot of the error that is produced when you try to use a contentful image with a nextjs image. The error reads Error: Invalid src prop
(images.ctfassets.net/32vfo22u7rll/1iWX47XqrH7kgDPE4el9iP/59f932ed3797917d3d19ab3a73f29bda/delasign
on 'next/image', hostname
"images.ctfassets.net" is not configured under images in your
"next.config.js
See more info: nextjs.org/docs/messages/next-image-unconfigured-host.

To resolve the issue above, complete the following two steps:

Step One: Update the Next Config

A screenshot of VSCode showing the updated next.config.mjs file.

Update the next.config file to include the images.ctfassets.net as shown in the code snippet below.

Step Two: Restart the App

A screenshot of Chrome showing that an image now loads.

Restart the app to allow the changes to take effect.

Looking to learn more about NextJS, ReactJS or web development?

Search our blog to find educational content on NextJS, ReactJS and web development.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details