Next/Image hostname config not working with external component library

This is a classic Next.js module resolution issue when using external component libraries. The problem isn't with your next.config.js configuration - it's that your external library has its own copy of Next.js bundled or is resolving to a different Next.js instance that doesn't have access to your config.

The Root Cause

When you import a component from an external library that uses next/image, that library's code is resolving to its own Next.js instance rather than your project's Next.js. This means it's not reading your next.config.js file at all.

Solutions

1. Ensure Next.js is a peer dependency (Best practice)

Your external component library should have next listed as a peerDependency, not a regular dependency. Check the library's package.json:

{
  "peerDependencies": {
    "next": ">=13.0.0",
    "react": ">=18.0.0"
  }
}

If it's listed under dependencies instead, that's your problem - the library is bundling its own Next.js copy.

2. Configure Next.js to transpile the external package

In your next.config.js, use transpilePackages to ensure the external library uses your Next.js instance:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.sanity.io',
      },
    ],
  },
  transpilePackages: ['your-external-library-name'],
}

3. Check for duplicate Next.js installations

Run this to check for multiple Next.js versions:

npm ls next
# or
pnpm ls next
# or
yarn why next

If you see multiple versions, dedupe them:

npm dedupe
# or add to package.json
{
  "overrides": {
    "next": "14.x.x"
  }
}

4. Use remotePatterns instead of domains

Modern Next.js versions prefer remotePatterns over the deprecated domains config:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.sanity.io',
        pathname: '/images/**',
      },
    ],
  },
}

5. If you control the external library

Make sure it's properly externalized for Next.js. If you're building the library with a bundler, ensure Next.js and React are marked as external:

// rollup.config.js or similar
external: ['react', 'react-dom', 'next', 'next/image']

The most common fix is #2 (transpilePackages) combined with ensuring the library has Next.js as a peer dependency. This ensures your app's Next.js instance and configuration are used throughout.