Wednesday, 28 June, 2023 UTC

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

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

Summary

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.
The post Fixing the NextJs Error: Invalid src prop on `next/image`, hostname is not configured under images appeared first on Js Craft.

... more @ js-craft.io

js-craft.io