How To Guides

Migrating Next.js Image Domains to Remote Patterns

by

Optimizing image handling in a Next.js application is crucial for performance and user experience. Next.js provides a built-in Image Optimization API that automatically optimizes images on-demand for faster load times. However, the way we specify which external domains are allowed to serve images has changed. The older images.domains configuration has been deprecated in favor of the more flexible images.remotePatterns.

Thank me by sharing on Twitter 🙏

Why the Change?

The images.domains configuration allowed developers to specify a list of domains from which images could be served. While this was straightforward, it lacked flexibility. The new images.remotePatterns configuration provides more control over image sources by allowing you to specify protocols, hostnames, and paths.

Benefits of images.remotePatterns

  • Granular Control: Specify not just domains, but also protocols and paths.
  • Enhanced Security: Define more specific patterns, reducing unauthorized image sources.
  • Future-Proofing: Aligns with Next.js’s ongoing improvements and best practices.

Implementing images.remotePatterns

Step 1: Locate Your Next.js Configuration File

Your Next.js configuration is typically found in next.config.js or next.config.mjs. Open this file in your preferred code editor.

Step 2: Replace images.domains with images.remotePatterns

Here’s how you can do it:

Before (with images.domains)

TypeScript
// next.config.js
module.exports = {
  images: {
    domains: ['example.com', 'anotherdomain.com'],
  },
};

After (with images.remotePatterns)

TypeScript
// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
      },
      {
        protocol: 'https',
        hostname: 'anotherdomain.com',
      },
    ],
  },
};

For a TypeScript configuration file (next.config.mjs), it would look like this:

Ultimate Unofficial Encyclopedia for Minecrafters: An A - Z Book of Tips and Tricks the Official Guides Don't Teach You
4.6 out of 5 stars(4655275)
$11.56 (as of November 3, 2025 18:14 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
Trapped in a Video Game: The Complete Series
4.8 out of 5 stars(4859759)
$23.06 (as of November 3, 2025 18:14 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
etguuds USB to USB C Cable 3ft, 2-Pack USB A to Type C Charger Cord Fast Charging for Samsung Galaxy A17 A16 A15 A26 A36 A56, S25 S24 S23 S22 S21 S20 S10 Note 20, for iPhone 17 16 15, Moto, Gray
4.6 out of 5 stars(46579116)
$5.93 (as of November 3, 2025 01:09 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)

TypeScript
// next.config.mjs
export default {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
      },
      {
        protocol: 'https',
        hostname: 'anotherdomain.com',
      },
    ],
  },
};

Optional: Add Path Patterns

You can also specify path patterns to refine the sources of your images:

TypeScript
// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        pathname: '/images/**',
      },
      {
        protocol: 'https',
        hostname: 'anotherdomain.com',
        pathname: '/media/**',
      },
    ],
  },
};

Testing and Verifying the Changes

  1. Restart Your Development Server: npm run dev
  2. Test Image Loading: Visit pages where external images are used to ensure they load correctly.
  3. Debugging Tips: If images are not loading, double-check the protocol, hostname, and path patterns in your configuration.

Conclusion

Migrating from images.domains to images.remotePatterns in Next.js is a straightforward process that enhances the security and flexibility of your image handling configuration. By following the steps outlined in this guide, you can ensure your application remains up-to-date with the latest best practices and continues to perform optimally.

Updating your configurations to keep pace with framework changes is part of maintaining a modern web application. With this migration, you’re not only adhering to the latest standards but also improving the robustness of your Next.js project.

Share this:

Related Posts:

Nextjs

Leave a Reply