frontmatter-markdown-loader

# React App

# NextJS

  • https://www.netlifycms.org/docs/nextjs/

The sample guide for Netlify CMS with NextJS is using frontmatter-markdown-loader and its Mode.REACT.

# Register the loader in config next.config.js

module.exports = {
  webpack: (cfg) => {
    cfg.module.rules.push({
      test: /\.md$/,
      use: 'frontmatter-markdown-loader',
      options: { mode: ['react-component'] }
    })
    return cfg
  }
}

Otherwise, just refer React Component Guide.

# Rewired create-react-app

react-app-rewired (opens new window) enables us to edit Webpack config easily.

# Register the loader in config config-overrides.js

module.exports = function override(config, env) {
  config.module.rules.push({
    test: /\.md$/,
    loader: 'frontmatter-markdown-loader',
    options: {
      mode: ['react-component']
    }
  })
  return config
}

react-app-rewire-frontmatter-markdown (opens new window) makes that config simpler and safer.

const rewireFrontmatterMarkdown = require('react-app-rewire-frontmatter-markdown')

module.exports = function override(config, env) {
  rewireFrontmatterMarkdown(config)
  return config
}

Otherwise, just refer React Component Guide.

← Vue App →