How can I keep static assets for my blog alongside my markdown files, and not under public folder when using Next.js?

Question

I'm creating a blog with Next.js.

https://dev.to/imranib/build-a-next-js-markdown-blog-5777 or https://dev.to/tinacms/creating-a-markdown-blog-with-next-js-52hk talk about how to have a content / blogs folder to keep the markdown files.

I'd ideally like to keep the assets for each post in it's own folder.

According to the Next.js docs,

Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

But, I don't want to have the markdown file in one place, and the images for it in another place. I'd like to have a folder structure like this:

- pages
  - [blog].js
- content
  - posts
    - my_first_post
      - index.mdx
      - assets
         - banner.jpeg
         - another_image.png
    - my_second_post
      - index.mdx
      - assets
         - banner.jpeg

Within each .mdx file, it'd still refer to the images by its relative path to the .mdx file.

Is there an easy way to do this? I'm thinking that I'd need to, during build, copy all assets from content to public to make this work.

Update 1: I'm using I'm using next-mdx-remote and it doesn't allow imports within the mdx file.

Answer 1

I think it can be done with next-image plugin.

You can add the plugin like this

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

If you use withPlugins package, you can try something like the following

module.exports = withPlugins(
  [
    [
      withImages,
      {
        inlineImageLimit: 10240,
      },
    ],
    [withCSS]
  ]
);

After you config the plugin, you should be able to import the image like the following

import BannerImg from "./assets/image.jpeg"

In my personal opinion, I think using the public folder can be very useful if you want to make use of CDN. You can simply configure assetPrefix to add CDN path to your assets based on your environments.

Update 1: Using next-mdx-remote

I did some search. There is an example in the Next.js repo on how to use the package. For your specific question. I think this might work,

// import you component. you can proabably import image directly 
import CustomImgTag from 'CustomImgTag';

// Custom components/renderers to pass to MDX.
// Since the MDX files aren't loaded by webpack, they have no knowledge of how
// to handle import statements. Instead, you must include components in scope
// here.
const components = {
  img: CustomImgTag,
  // It also works with dynamically-imported components, which is especially
  // useful for conditionally loading components for certain routes.
  // See the notes in README.md for more details.
  TestComponent: dynamic(() => import('../../components/TestComponent')),
  Head,
}


// You can pass the the config to renderToString
export const getStaticProps = async ({ params }) => {
  // ...... other code

  const mdxSource = await renderToString(content, {
    components,
    // ...... additional config
  })

  return {
    props: {
      source: mdxSource
    },
  }
}

Reference

Please note that the answer is mostly my best educated guess based on the official example. I hope it helps or provides some useful info.

• with-mdx-remote example
• Source JavaScript File