Allow extra loaders to be passed as a plugin option in next-mdx

[shuklaayush]

Since next-mdx doesn't support YAML frontmatter, why not expose the webpack config to allow extra loaders to be passed as a plugin argument? Like this:

// next-mdx
...
config.module.rules.push({
test: extension,
use: [
  options.defaultLoaders.babel,
  {
    loader: "@mdx-js/loader",
    options: pluginOptions.options,
  },
  ...pluginOptions.additionalLoaders
],
...

We can then use a custom loader function to extract frontmatter, add a default layout, or do other pre-processing. In my opinion, it's a more flexible solution than relying on 3rd party plugins.

Example loader:

// loader.js
const matter = require("gray-matter");
const path = require("path");

module.exports = async function (src) {
  const callback = this.async();
  const { content, data } = matter(src);
  const slug = path.basename(
    this.resourcePath,
    path.extname(this.resourcePath)
  );
  const frontMatter = {...data, slug};

  const layoutPath = path.relative(
    path.dirname(this.resourcePath),
    path.join(this.rootContext, "components/layout")
  );

  const mdx = `import Layout from "${layoutPath}";
export default Layout(${JSON.stringify(frontMatter)});

${content}`;

  return callback(null, mdx);
};

Here, Layout is an HOC which takes the extracted frontmatter as an argument to define the default MDX layout. Since the frontmatter is not exported as a variable from within the MDX, Fast Refresh still works.