Rushing Labs

Handling images (next/image)

Next Images (next/image)

Taken from this link, and other tutorials I've tried to work through, it appears that we only need two lines to use images with the new Next.js component.


import Image from 'next/image'

<Image src='/blair.jpeg' alt='Fluffy white dog lying on a couch' height={200} width={150} />

However, doing it this way looks like we're required to include images locally, in the resulting site build. So, over time, this would inflate the bundle size for something like a blog, where we need another image with almost every post.

So, how to accomplish it with externally hosted images?

External Images§

A simple change, with an extra config in next.config.js. Without this addition to the config, you'll run into an "Un-configured Host" error, as described here.



import Image from 'next/image'

<Image src=""
    alt="My special screenshot" height={300} width={450} />


module.exports = {
    images: {
        domains: ['']
RushingLabs - Analytics