Fix InvalidImageError: Invalid src prop on next/image, hostname "cdn.example.com" is not configured under images in your next.config.js in Next.js

This error occurs when the next/image component receives an external URL whose hostname is not listed in the images configuration in next.config.js. Next.js requires explicit allowlisting of external image domains for security and optimization. Fix it by adding the hostname to the images.remotePatterns array.

Reading the Stack Trace

Here's what each line means:

• at imageConfigDefault (/app/node_modules/next/dist/shared/lib/image-config.js:42:11): The image config is being checked against the allowed hostnames and the provided hostname is not in the list.
• at resolveImageData (/app/node_modules/next/dist/client/image.js:187:15): Next.js image resolver validates the src URL before processing the image for optimization.
• at Image (/app/node_modules/next/dist/client/image.js:238:26): The next/image component throws during render because the hostname validation failed.

Common Causes

// next.config.js
module.exports = {
  // No images configuration
};

// next.config.js
module.exports = {
  images: {
    domains: ['cdn.example.com'] // Deprecated in Next.js 14+
  }
};

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'cdn.exmple.com' } // Typo
    ]
  }
};

The Fix

Add the external image hostname to images.remotePatterns in next.config.js. Use pathname patterns to restrict which paths are allowed for additional security. This tells Next.js to allow and optimize images from that hostname.

// next.config.js
module.exports = {
  reactStrictMode: true,
};

// next.config.js
module.exports = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.example.com',
        pathname: '/photos/**',
      },
    ],
  },
};

Testing the Fix

import { render, screen } from '@testing-library/react';
import Avatar from '@/components/Avatar';

describe('Avatar', () => {
  it('renders an image with the correct src', () => {
    render(<Avatar src="https://cdn.example.com/photos/avatar.jpg" alt="User" />);
    const img = screen.getByAltText('User');
    expect(img).toBeInTheDocument();
    expect(img).toHaveAttribute('src');
  });

  it('renders alt text for accessibility', () => {
    render(<Avatar src="https://cdn.example.com/photos/avatar.jpg" alt="Profile photo" />);
    expect(screen.getByAltText('Profile photo')).toBeInTheDocument();
  });
});

Run your tests:

npm test

Pushing Through CI/CD

git checkout -b fix/next-image-remote-pattern,git add next.config.js,git commit -m "fix: add cdn.example.com to next/image remotePatterns",git push origin fix/next-image-remote-pattern

Your CI config should look something like this:

name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm test -- --coverage
      - run: npm run build

The Full Manual Process: 18 Steps

Here's every step you just went through to fix this one bug:

1. Notice the error alert or see it in your monitoring tool
2. Open the error dashboard and read the stack trace
3. Identify the file and line number from the stack trace
4. Open your IDE and navigate to the file
5. Read the surrounding code to understand context
6. Reproduce the error locally
7. Identify the root cause
8. Write the fix
9. Run the test suite locally
10. Fix any failing tests
11. Write new tests covering the edge case
12. Run the full test suite again
13. Create a new git branch
14. Commit and push your changes
15. Open a pull request
16. Wait for code review
17. Merge and deploy to production
18. Monitor production to confirm the error is resolved

Total time: 30-60 minutes. For one bug.

npm install bugstack-sdk

import { initBugStack } from 'bugstack-sdk'

initBugStack({ apiKey: process.env.BUGSTACK_API_KEY })

Deploying the Fix (Manual Path)

1. Update next.config.js with the correct remotePatterns entry.
2. Run the Next.js build locally to confirm no image errors.
3. Open a pull request with the config change.
4. Wait for CI checks to pass on the PR.
5. Merge to main and verify images load correctly in staging.

Frequently Asked Questions