Reputation: 746
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?
Upvotes: 60
Views: 129281
Reputation: 5844
Keep in mind that using environment variables can break this.
I was using Next.js with Docker (using the official Next.js Dockerfile) and AWS Elastic Beanstalk wasn't passing environment variables to the Dockerfile during build. I had a similar next.config.js:
const s3Bucket = process.env.S3_BUCKET;
const nextConfig = {
output: 'standalone',
images: s3Bucket ? { remotePatterns: [{ hostname: s3Bucket }] } : undefined,
};
However, with output: 'standalone'
, the remotePatterns
config option is inlined in the resulting server.js file of the docker image. If you open that file, you would see something like this:
const nextConfig = {/* JSON containing `remotePatterns` */}
process.env.__NEXT_PRIVATE_STANDALONE_CONFIG = JSON.stringify(nextConfig)
In my case, since the S3_BUCKET
variable was not available, the remotePatterns
option was not ending up in the final docker image. So I just had to hardcode the domain in my next.config.js.
Upvotes: 0
Reputation: 151
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 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!
Upvotes: 2
Reputation: 491
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: '**',
},
],
},
}
I am giving an update for this answer because I change my usage. My new code example like this:
const path = require('path');
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
sassOptions: {
includePaths: [path.join(__dirname, 'src/styles')],
prependData: `@import "variables.scss";`,
},
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'example.com',
port: '',
pathname: '**',
},
{
protocol: 'https',
hostname: 'another-example.com',
port: '',
pathname: '**',
},
],
},
}
export default nextConfig;
I change it because of security. If you know the domain you want to fetch images from, it is better to specify them explicitly rather than using wildcard patterns.
This helps to mitigate potential security risks by limiting the sources from which images can be loaded. It also improves performance by reducing unnecessary network requests to unknown domains.
Upvotes: 20
Reputation: 1
echoing @adamduncan , Next.JS will error out in local development if the domain is not set in next.config.* - More likely is that in the deployed environment, you forgot to copy the config file over in the Dockerfile execution.
Upvotes: 0
Reputation: 1384
You need to set the configuration in the next.config.js file first.
For Example:
on next.config.js
module.exports = {
images: {
domains: ['images.unsplash.com'],
},
}
on pages/your_page_file.tsx
<Image
alt="The guitarist in the concert."
src="https://images.unsplash.com/photo-1464375117522-1311d6a5b81f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2250&q=80"
width={2250}
height={1390}
layout="responsive"
/>
For versions above 12.3.0 this is the accepted approach:
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'assets.example.com',
port: '',
pathname: '/account123/**',
},
],
},
}
Refer https://nextjs.org/docs/messages/next-image-unconfigured-host
Upvotes: 126
Reputation: 101
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.
Upvotes: 7
Reputation: 94
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
Upvotes: 6