I use the Next.js Image
component for image optimization. It works great on dev but it doesn't load images from external URLs in production.
What can I do?
I use the Next.js Image
component for image optimization. It works great on dev but it doesn't load images from external URLs in production.
What can I do?
I noticed you're having trouble with next/image not loading external images after deployment. I faced a similar issue, and after some tweaking, here's the configuration that worked for me:
/** @type {import('next').NextConfig} */
const path = require('path')
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: '**',
port: '',
pathname: '**',
},
],
},
}
module.exports = nextConfig
Feel free to give this configuration a try, and let me know if it resolves your problem. If you have any other questions or run into further issues, I'm here to help!
For future references, I was having the same problem after deploying my next.js site to Netlify. Only later, reading my logs, I found
Image domains set in next.config.js are ignored. Please set the env variable NEXT_IMAGE_ALLOWED_DOMAINS to "cdn.sanity.io" instead
So this is probably something to note. In the meanwhile before I saw it, I plugged this next-sanity-image plugin https://www.sanity.io/plugins/next-sanity-image to my page, which also bypassed the problem
If you want to display any images in nextjs app from accross the internet; here is my next config:
const nextConfig = {
reactStrictMode: true,
i18n,
sassOptions: {
includePaths: [path.join(__dirname, 'src/styles')],
prependData: `@import "variables.scss";`,
},
images: {
remotePatterns: [
{
protocol: 'https',
hostname: '**',
port: '',
pathname: '**',
},
],
},
}
Add and declare your domain in your next config, next.config.js
:
module.exports = {
reactStrictMode: true,
images: {
domains: ["yourDomain.com"],
formats: ["image/webp"],
},
};
The configuration file, next.config.js
, should be in the root of your project.
And lastly, restart project even in dev mode.
You need to set the configuration in the next.config.js file first.
For Example:
on next.config.js
on pages/your_page_file.tsx
For versions above 12.3.0 this is the accepted approach:
Refer https://nextjs.org/docs/messages/next-image-unconfigured-host