How to setup NextJS to work with images hosted on Contentful

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

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 04/18/2024 at 13:24
Last Updated on 04/18/2024 at 15:02
<p>Two flowers that represents NextJS and Contentful side by side with the text "Setup Images Hostname” beneath it.</p>

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

SubscribeDownload Open Source ProjectHow to setup NextJS to work with Contentful
<p>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.</p>

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

Step One: Update the Next Config

<p>A screenshot of VSCode showing the updated next.config.mjs file.</p>

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

Step Two: Restart the App

<p>A screenshot of Chrome showing that an image now loads.</p>

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.

Search our Blog

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.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe