How to allow any domain host for next/image
#Images
fringe umbra
crisp shuttleBOT
Hi @fringe umbra. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To allow any domain host for next/image in Next.js, you need to configure the remotePatterns property in your next.config.js file. However, it's important to note that allowing any domain host is not recommended due to potential security risks. It's better to specify the exact domains you want to allow.
Here's an example of how you can configure remotePatterns:
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: '**.example.com',
port: '',
search: '',
},
],
},
}
In the example above, the src property of next/image must start with <https://img1.example.com> or <https://me.avatar.example.com> or any number of subdomains. It cannot have a port or query string. Any other protocol or unmatched hostname will respond with a 400 Bad Request.
Wildcard patterns can be used for both pathname and hostname and have the following syntax:
*match a single path segment or subdomain**match any number of path segments at the end or subdomains at the beginning
The ** syntax does not work in the middle of the pattern.
When omitting protocol, port, pathname, or search then the wildcard ** is implied. This is not recommended because it may allow malicious actors to optimize URLs you did not intend.