AI & Agent Dev Bug Sandbox Back to Radar

Docs: `Cms-Wordpress` Blog Demo Is Missing Images

The official cms-wordpress blog demo displays broken or missing images because external WordPress image domains are not allowed by Next.js Image Optimization, likely due to missing `remotePatterns` configuration.

mediumConfidence 70%Next.js

Origin Analysis

The example's `next.config.js` lacks `images.remotePatterns` to whitelist the external WordPress-hosted image domains, causing the Next.js Image component to block remote requests and render no image.

1. Visit https://next-blog-wordpress.vercel.app/. 2. Observe that blog post images fail to load. 3. Open browser developer tools and note 400/404 errors or a warning about unconfigured hostname for the Next.js Image component.

Fixing Code Block

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*.wp.com',
      },
      {
        protocol: 'https',
        hostname: '*.wordpress.com',
      },
      // If the actual domain differs, replace with the precise hostname.
    ],
  },
};

module.exports = nextConfig;

Adding `remotePatterns` in `next.config.js` explicitly allows the Next.js Image Optimization API to fetch and optimize images from the listed WordPress domains. This prevents the built-in hostname protection from blocking legitimate external image URLs. Adjust the `hostname` entries to match the actual WordPress hosting domain used by the demo.

Edge Case Audit

Using wildcard hosts like `*.wp.com` may permit unintended subdomains if the domain is compromised. For production, restrict to exact hostnames and consider a dedicated image proxy. Rollback: simply remove the added `remotePatterns` block or restore the original `next.config.js` from version control. If the upstream WordPress domain changes, images will break again; monitor and update configuration accordingly.