nextjs - 💡(How to fix) Fix wrapping `nextConfig` with `withMDX` resets `images.remotePatterns` [1 comments, 2 participants]

1. The following error will be shown: ⨯ Error: Invalid src prop onnext/image, hostname "utfs.io" is not configured under images in your next.config.js``

TL;DR

• Configure the images property in next.config.js to include the hostname "utfs.io" to resolve the next/image error.

Guidance

• Verify that next.config.js has an images property configured, and add "utfs.io" to the list of allowed hostnames if it's not already included.
• Check the next/image documentation to ensure that the src prop is being used correctly and that the image URL is valid.
• Review the changes made during the migration to Next 16 and Next/MDX to identify any potential configuration issues that may have caused the error.

Example

// next.config.js
module.exports = {
  // ... other configurations ...
  images: {
    domains: ['utfs.io'], // add the hostname to the list of allowed domains
  },
}

Notes

• This solution assumes that the error is caused by a missing configuration in next.config.js. If the issue persists after adding the hostname, further investigation may be needed.
• The provided environment information and package versions may be relevant to the issue, but without more context, it's difficult to determine their impact.

Recommendation

• Apply workaround: Configure the images property in next.config.js to include the hostname "utfs.io", as this is the most direct solution to the error message provided.