helpers.js

module.exports.addDefaultImport = function addImport(tree, mod, name) {
  tree.children.unshift({
    type: 'import',
    value: `import _${name} from '${mod}'`,
  });
  return `_${name}`;
};

images.mjs

import { visit } from 'unist-util-visit';
import { addDefaultImport } from './helpers.js';
import sizeOf from 'image-size';

let nextPublic = `${process.cwd()}/public/`;

export const images = () => {
  return tree => {
    let Image = addDefaultImport(tree, 'next/image', 'Image');

    visit(tree, 'image', node => {
      if (node.url.startsWith('/')) {
        let { height, width } = sizeOf(`${nextPublic}/${node.url}`);
        node.type = 'jsx';
        node.value = `<${Image} 
          src="${node.url}"
          alt="${node.alt}"
          height={${height}}
          width={${width}}
        />`;
      }
    });
  };
};

next.config.mjs

import nextMdx from '@next/mdx';
import { images } from './src/remark/images.mjs';

let withMDX = nextMdx({
  options: {
    remarkPlugins: [images],
  },
});

export default withMDX({
  reactStrictMode: true,
  pageExtensions: ['js', 'jsx', 'mdx'],
});