next-markdown.js

const marked = require("marked");

module.exports = (nextConfig = {}) => {
  return Object.assign({}, nextConfig, {
    webpack(config, options) {
      config.module.rules.push({
        test: /\.(html)$/,
        use: {
          loader: "html-loader",
          options: {
            attrs: [":data-src"]
          }
        }
      });
      config.module.rules.push({
        test: /\.md$/,
        use: [
          { loader: "html-loader" },
          {
            loader: "markdown-loader",
            options: { pedantic: true, renderer: new marked.Renderer() }
          }
        ]
      });
      if (typeof nextConfig.webpack === "function") {
        return nextConfig.webpack(config, options);
      }
      return config;
    }
  });
};

Hi, I was about to write one of these then found this. I found this other example https://stackoverflow.com/a/52280005/376489 too, but could you share what the first html-loader rule with the ":data-src" option does here?

edit: nm, I think I’m going to use https://github.com/zeit/next-plugins/tree/master/packages/next-mdx instead