CODEWITHSUNDEEP
next.js
Enbies Francoeur
Enbies Francoeur

Reputation: 63

Next.js - Can I configure multiple image hostnames in next.config.js?

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

Upvotes: 6

Views: 12305

Answers (4)

Janik Sunke
Janik Sunke

Reputation: 1

This works for me. Splitting hostnames with |

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
        {
          protocol: 'http',
          hostname: '(localhost|127.0.0.1)',
        },
    ]
  }
}

Upvotes: 0

Al Mamun Khan
Al Mamun Khan

Reputation: 747

You can use hostname: "**" to cover all external image links. No need to add any extra code for this situation.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],
  },
};

export default nextConfig;

Upvotes: 2

Nick Vu
Nick Vu

Reputation: 15540

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
    }))
  }
}

Upvotes: 22

Mahesh More
Mahesh More

Reputation: 855

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.

Upvotes: 1

Related Questions