Allow @next/mdx plugin to accept webpack loaders

Feature request

Is your feature request related to a problem? Please describe.

The problem is quite similar to what has been described in the #8857 issue. I want to use the front-matter in my markdown files to export any meta data. Currently we can export a variable from mdx files e.g.

export const meta = {}

In this post we will ....

and it will work. But that is more of a tech heavy solution. Writing that meta data in frontmatter would be much helpful for non-techy people to write blogs. That is the first part.

Next, what I want is to add some custom properties like short info, time to read, formatted published date to each markdown based on it’s content i.e. assume that we have following markdown file

---
title: 'My Blog'
date: '2020-12-12'
---

In this post we will ....

Expected output (input for @mdx-js/loader after processing with my custom logic) after formatting date, calculating time to read based on content, adding a description like so

export const meta = {
  title: 'My Blog',
  displayDate: 'December 12, 2020',
  description: 'In this pos',
  timeToRead: '2 min read'
}


In this post we will ....

And the blog writer doesn’t need to care about it.

Describe the solution you’d like

This can be easily accomplished if we can just provide a plugin option to take loaders for webpack i.e.

module.exports = (pluginOptions = {}) => (nextConfig = {}) => {
  const extension = pluginOptions.extension || /\.mdx$/
+ const loaders = plugionOptions.loaders || []
  return Object.assign({}, nextConfig, {
    webpack(config, options) {
      config.module.rules.push({
        test: extension,
        use: [
          options.defaultLoaders.babel,
          {
            loader: '@mdx-js/loader',
            options: pluginOptions.options,
          },
+         ...loaders
        ],
      })

and when using the @next/mdx plugin, on will just have to pass the loaders (optional)

module.exports = require("@next/mdx")({
+  loaders: [],
})( .... )

Describe alternatives you’ve considered

Currently I am using the above code snippet loaded via a custom nextjs plugin. see here

module.exports = require("@next/mdx")()( .... )
module.exports = require("./my-plugin")()( .... )

Additional context

I can create a PR if this feature may be useful to the community.

[sudkumar]

I could not found any library that would fit my need out of box, so here is the custom plugin that I wrote. It may be useful to anybody else stumbling over this issue.

[timneutkens]

you can create a custom implementation, but you could also write a MDX plugin that converts frontmatter to export const meta