CODEWITHSUNDEEP
javascriptreactjsnext.js
dpointeck
dpointeck

Reputation: 176

NextJS import images in MDX

I tried a official NextJS MDX-Blog example. https://github.com/mdx-js/mdx/tree/master/examples/next

But what I'm not able to figure out is how do I setup the NextJS config to load images via webpack?

import img from "./image.jpg"

## Hallo Blogwelt

![My own Image]({img})

Upvotes: 6

Views: 10802

Answers (6)

Mees van Wel
Mees van Wel

Reputation: 1656

If you installed the @next/mdx package you can use the <Image /> component Next.js provides:

// pages/cute-cat.mdx

import Image from "next/image";
import cuteCat from "./cute-cat.jpg";

# Cute cat

This is a picture of a cute cat

<Image src={cuteCat} />

Upvotes: 0

Gangula
Gangula

Reputation: 7254

I'm building a Next.js blog with MDX-Bundler. It allows you to use a remark plugin called remark-mdx-images which converts markdown flavored images into JSX images.

Below is an example configuration to get it to work

const {code} = await bundleMDX(source, {
  cwd: '/posts/directory/on/disk',
  xdmOptions: options => {
    options.remarkPlugins = [...(options.remarkPlugins ?? []), remarkMdxImages]

    return options
  },
  esbuildOptions: options => {
    options.outdir = '/public/directory/on/disk/img'
    options.loader = {
      ...options.loader,
      '.jpg': 'file'
    }
    options.publicPath = '/img/'
    options.write = true

    return options
  }
})

You can check out the following resources for detailed explanation on how to do it.

  1. Images with MDX-Bundler
  2. How I built the new notjust.dev platform with NextJS

Upvotes: 1

leerob
leerob

Reputation: 3122

You can also use the /public directory to hold your images. For example, if you add an image at /public/image.jpg, you can reference the image in your blog post like this:

![Alt Text](/image.jpg)

Edit: https://nextjs.org/docs/basic-features/image-optimization#local-images

Upvotes: 8

JokeNeverSoke
JokeNeverSoke

Reputation: 865

Sorry I'm late, but with Next v11 you can directly import images.

That being said, you can add custom loaders for Webpack to modify your mdx files and use a custom component to process the image. e.g.:

// save this somewhere such as mdxLoader and
// add it to your webpack configuration
const replaceAll = require("string.prototype.replaceall");

module.exports = function (content, map, meta) {
  return replaceAll(
    map
    content,
    /\!\[(.*)\]\((.+)\)/g,
    `<NextImage alt="$1" src={require('$2').default} />`
  );
};

and process it:

// and reference this in your MDX provider
const components = {
  NextImage: (props: any) => {
    return <Image alt={props.alt || "Image"} {...props} />;
  },
};

Now you can use markdown flavored images in your posts!

![my image](./image.png)

Include the ./ relative prefix, however.

Upvotes: 4

dpointeck
dpointeck

Reputation: 176

Hey thanks for the tip!

It's been a while since June and a gave it another try today and now it's working like expected from me.

  1. I took the MDX/Next Example

  2. Edited the next.config.js like so:

    const withPlugins = require('next-compose-plugins');
const images = require('remark-images');
const emoji = require('remark-emoji');
const optimizedImages = require('next-optimized-images');

const withMDX = require('@zeit/next-mdx')({
  extension: /\.mdx?$/,
  options: {
    mdPlugins: [images, emoji]
  }
});

module.exports = withPlugins([
 [
   withMDX,
   {
     pageExtensions: ['js', 'jsx', 'md', 'mdx']
   }
 ],
   [optimizedImages]
 ]);

Now it works exactly like expected and in a Markdown file within the pages folder I'm able to do something like this:

import Layout from '../../components/Layout'
import Image from './catimage.jpg'


# Hey guys this is the heading of my post!

<img src={Image} alt="Image of a cat" />

Upvotes: 3

supersize
supersize

Reputation: 14763

Imagine your next.config.js as something to append to an existing webpack.config behind the scenes. You won't have direct access to the webpack but you can extend it.

So in order to load images you'll need an appropriate image loader.

I found next-images easiest to use:

const withImages = require('next-images')
module.exports = withImages({
  webpack(config, options) {
    return config
  }
})

then you can import:

import Img from "./image.jpg"

Upvotes: 4

Related Questions