Next.js App Router Images Not Loading in Production

Solution

This issue is often caused by misconfiguration of the next.config.js file or incorrect usage of the Image component with the new App Router. Here are some steps to resolve it:

1. Check the images.domains configuration: Ensure that all external domains used for images are listed in the images.domains array in your next.config.js.
2. Use the correct src path: For static images in the public folder, use /image.png (with a leading slash). For images from remote sources, ensure the domain is allowed.
3. Deployment platform settings: If deploying to Vercel or another platform, make sure the public directory is included and not ignored by .gitignore or build settings.
4. Clear build cache: Sometimes, a stale build cache can cause image issues. Run next build && next start after clearing .next.

Example next.config.js:

module.exports = {
  images: {
    domains: ['yourdomain.com', 'anotherdomain.com'],
  },
};

By following these steps, you should be able to resolve most image loading issues in production with Next.js App Router.