Fetching External URL Images at Build time | Next.js | Page 1

outer sleet Nov 29, 2022, 1:52 AM

#

I think I'm confusing some concepts from Gatsby, but if I use next/image with a source that's an external url, will these images be fetched at build time for pages that are generated at build time? I've made the next.config changes to include the patterns for the external url https://assets.coingecko.com/coins/images/4513/small/Vite.png?1558014583

// next.config.js
  images: {
    domains: ['assets.coingecko.com'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.coingecko.com',
        pathname: '/coins/images/**',
      },
    ],
  },

And rendering the images using:

<Image
  src={https://assets.coingecko.com/coins/images/4513/small/Vite.png?1558014583}
  alt={`${coin.name} logo`}
  width={35}
  height={35}
/>

In production, these images take a second to load and have the url source https://<MY_SITE_DOMAIN>.com/_next/image?url=https%3A%2F%2Fassets.coingecko.com%2Fcoins%2Fimages%2F4513%2Flarge%2FVite.png%3F1558014583&w=256&q=75
Am I misunderstanding next/image and are these just being fetched on the client?

small sedge Nov 29, 2022, 2:49 AM

#

you need to add a loader function to your config, if you want Gatsby to generate the images for you

#

build time generation only works for statically imported images, afaik

#

(locally)

outer sleet Nov 29, 2022, 2:57 AM

#

Oops sorry @small sedge meant to do this in Next.js
Searching around I found this SO (https://stackoverflow.com/a/71377671) which states to use a loader. Unfortunately that doesn't seem to work either.

Stack Overflow

Nextjs not fetching images using image url after deploying on produ...

For production deployment, we have a network of 3 linux machines. Two of those are used for deployment, and one is nginx proxy.
And for dev deployment, we have one separate linux machine.
Inside the

#

It does clean up the src property for the image to be just {https://assets.coingecko.com/coins/images/4513/small/Vite.png?1558014583 instead of https://<MY_SITE_DOMAIN>.com/_next/image?url=https%3A%2F%2Fassets.coingecko.com%2Fcoins%2Fimages%2F4513%2Flarge%2FVite.png%3F1558014583&w=256&q=75 but yeah seems to be fetching on the client because there is still a delay when the page loads vs when the image loads

#Fetching External URL Images at Build time