Next.js - Can i have a multiple hostname in next.config.js? - next.js

Question

I write this code below in my next.config.js
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
remotePatterns: [
{
protocol: 'https',
hostname: [
'images.unsplash.com',
'hydeparkwinterwonderland.com',
'wembleypark.com']
},
]
}
}
module.exports = nextConfig
but it throw an error like this:
The value at .images.remotePatterns[0].hostname must be a string but it was an array.
See more info here: https://nextjs.org/docs/messages/invalid-next-config
Error: Invalid images.remotePatterns values:
{"protocol":"https","hostname":["images.unsplash.com","hydeparkwinterwonderland.com","wembleypark.com"]}
remotePatterns value must follow format { protocol: 'https', hostname: 'example.com', port: '', pathname: '/imgs/**' }.
See more info here: https://nextjs.org/docs/messages/invalid-images-config
looking for an answer, I'm a newbie please be patient with me

Answer 1

hostname only allows a single value, so you cannot pass an array of host names. Instead of that, you can have multiple items for host names in remotePatterns.
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'images.unsplash.com'
},
{
protocol: 'https',
hostname: 'hydeparkwinterwonderland.com'
},
{
protocol: 'https',
hostname: 'wembleypark.com'
},
]
}
}
Or less duplicated code with map
const hostnames = [
'images.unsplash.com',
'hydeparkwinterwonderland.com',
'wembleypark.com']
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
remotePatterns: hostnames.map(hostname => ({
protocol: 'https',
hostname
}))
}
}

Answer 2

So you are trying to configure multiple remote domains but nextjs doesn't allow you to specify hostname as an array (as the name stated it's hostname), so answer your original questions you need to tweak the code as below.
const nextConfig = {
reactStrictMode: true,
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'images.unsplash.com'
},
{
protocol: 'https',
hostname: 'hydeparkwinterwonderland.com'
},
{
protocol: 'https',
hostname: 'wembleypark.com'
},
]
}
}
Basically remotePatters accept an array of object and each object denote one pattern so you need to create multiple patterns for the different domain name.