Workaround for Next.js 14 Image Component Bug in MDX Files

Next.js 14 has brought a host of improvements and features to enhance web development. However, like any technology, it’s not without its quirks. A notable issue arises when using the Next.js Image component within MDX files.

Understanding the Bug:

The bug manifests when you try to embed the Next.js Image component directly in MDX files. Typically, this would result in rendering issues or failure to load the page correctly.

Error: Cannot access Image.propTypes on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

Issues related to this bug.

• 56153
• 52415

The Workaround:

• Creating a Wrapper Component: The solution involves creating a new component that wraps around the Next.js Image component.

  import React from 'react'
  import Image, { ImageProps } from 'next/image'
  
  export function MdxImage(props: ImageProps) {
    return <Image {...props} alt={props.alt} />;
  }
  

• Passing Props: This wrapper component takes in all necessary props and forwards them to the Image component.

• Usage in MDX Files: Instead of using the standard Image component in your MDX files, you use this custom wrapper component.

  import { MdxImage as Image } from '@/components/MdxImage'
  import yourImage from './yourImage.png'
  
  <Image className="mt-4" src={yourImage} alt="your alt text" />
  

This workaround not only solves the immediate problem but also highlights the flexibility and extensibility of Next.js. It's a testament to the platform's adaptability and the community's ingenuity in finding solutions.