Fixing the NextJs Error: Invalid src prop on `next/image`, hostname is not configured under images

DanielJune 28, 2023

Let's say we have the following NextJs page:

import Image from 'next/image'
export default function Home() {
  return (
    <main className={styles.main}>
      <h1>The biker cat 😼!</h1>
      <Image
        src="https://www.js-craft.io/wp-content/uploads/2023/06/biker_cat.webp"
        width={500}
        height={413}
      />
    </main>
  )
}

If we try to pass an external url in a NextJs image component, with no other configuration, we will get the below error:

Error: Invalid src prop (https://storage.js-craft.io/biker_cat.webp) on `next/image`, hostname "www.js-craft.io" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

In order to fix this error we need to add the path to the external CDN or image in the next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        domains: ['www.js-craft.io'],
    },
}

module.exports = nextConfig

In this case www.js-craft.io will be added to the image domains property.

If you are using the create-next-app utility then restarting npm run dev is a good idea to prevent other errors.

And that's it. Here is the link to the Gitub repo used in this example.