
I recently migrated this site to Next.JS from Gatsby. I wish I had a good reason for this, but I don't.

The Gatsby site used MDX and I wanted to carry that over. Little did I know what a pain in the arse it is to get MDX working *just so* on Next.JS.

I needed a setup that supported:

* frontmatter
* inlined components
* colocated images
* presentation templates

Next.js has [`@next/mdx`](https://www.npmjs.com/package/@next/mdx) which supports inlined components, and I guess colocated images through imports, but not frontmatter. Also, presentation templates need to be imported inline which is ugly, IMO. I could live with the image imports, but having to import the same components into every MDX file that I needed was not optimal. It's nice that you can keep your `mdx` files in `pages/` though.

So onward to [`next-mdx-remote`](https://www.npmjs.com/package/next-mdx-remote). This supports frontmatter using `grey-matter`, and you can pass common inline components through the template which you can set up through Next.JS dynamic routes. Ace. But no colocated images. In fact, images can only be served through `public/`. I attempted to dynamically `require` or `import` them. I tried a variation on [this solution](https://stackoverflow.com/a/65681762/6996864) to load the images, but kept getting runtime errors. Alas, etc.

Resolving that I didn't have the time to faff around with this just now (procrastination task), my solution was to use [`copy-webpack-plugin`](https://www.npmjs.com/package/copy-webpack-plugin) and have webpack copy the images to `public/`. I don't like it, but it works, and I can figure out if there's a nicer way of doing this later.

```javascript:title=next.config.js
webpack: (config) => {
    config.plugins.push(
        new CopyPlugin({
            patterns: [
                {
                    from: path.join(__dirname, 'path/**/*.jpg'),
                    to: path.join(__dirname, 'public/[path][name][ext]'),
                },
                ...
            ],
        })
    );
}
```

Update the `from` to point to where your colocated images will be, and the `to` will match the directory structure in `public/`. You also need to use `path.join` or whatever you want to use to have the full path. Relative paths won't work here.

You'll now be able to use markdown image syntax to reference the image:

```markdown
![Image description](colocated-image.jpg)
```

This will generate an `<img />` tag, which you can replace in your template by passing an `img` component to `MDXRemote`. You can replace it with `next/image` or a custom image component. `path` is a variable set to the path to the `mdx` file.

```javascript
const components = (path) => ({
    img: (props) => {
        return <Image {...props} src={`/assets/${path}/${props.src}`} fill lazy />;
    }
});

return (
    <MDXRemote {...mdxSource} components={components(path)} />
);
```

## See also

* [How to use images in a `.mdx` file outside of `public/` folder while using `next-mdx-remote` in Next JS? (StackOverflow)](https://stackoverflow.com/a/65681762/6996864))


An inelegant workaround to use colocated images with MDX on Next.JS.

Colocated images with MDX and Next.JS


This is specifically if you're using [`sharp`](https://github.com/lovell/sharp) in [Next.js](https://nextjs.org/) API endpoints, which [Netlify](https://www.netlify.com/) deploy as [functions](https://docs.netlify.com/functions/overview/). It might be relevant even if you're *not* using Next.js, but I haven't tested this.

Netlify may fail to build, or the build will be successful but the API endpoint will crash/500 when invoked.

I was getting successful builds, but the endpoint would fail, and the Netlify function log would report `Error: Cannot find module 'sharp'` because it seems Netlify excludes this package for Reasons(TM).

[Next.js documentation](https://nextjs.org/docs/messages/sharp-missing-in-production) recommends adding the `NEXT_SHARP_PATH` environment variable:

```bash
NEXT_SHARP_PATH=/tmp/node_modules/sharp
```

But this doesn't affect Netlify functions. Good to have, though.

Another recommendation was to add `sharp` to `external_node_modules` in `netlify.toml`, which explicitly tells Netlify which external modules to include in the bundle:

```text:title=netlify.toml
[functions]
  external_node_modules = ["sharp"]
```

Nice thought, but this didn't change anything for me.

What did work for me was using a package alias to give the `sharp` package a custom name so that it doesn't get filtered out. [This ticket](https://github.com/netlify/next-runtime/issues/1195#issuecomment-1030533349)[1] uses the `yarn` syntax, but the `npm` syntax is similar:

```bash
npm i some-alias@npm:package@version
```

This allowed the package to be found, but the package build was now failing with the error `Module parse failed: Unexpected character '' (1:0)`. I've lost where I found this solution, but adding this to the `webpack` config in `next.config.js` worked for me:

```javascript:title=next.config.js
config.module.rules.push({
    test: /\.node$/,
    use: "node-loader"
});
```

Adjust the syntax to whatever it is you're doing in your webpack config.

Anyway, this took far longer than I would have liked to resolve, hopefully this saves you some time.

---

[1] Further down, another user suggested creating a separate plugin that forcibly includes the `sharp` module. Tried this, didn't work for me.


2 posts tagged “next-js”

Colocated images with MDX and Next.JS

Deploy sharp with Next.js on Netlify