@stefanprobst/next-markdown

next-markdown

Adds a Webpack loader for importing .md files as HTML to the Next.js config.

How to use

First, add the loader to the Next.js configuration in next.config.js:

const withMarkdown = require('@stefanprobst/next-markdown')(/* options */)

const nextConfig = {
  /** ... */
}

module.exports = withMarkdown(nextConfig)

Markdown files can then be imported as HTML. Frontmatter data is accessible on the named data export:

import html, { data } from '@/content/faq.md'

export default function Page() {
  return (
    <main>
      <h1>{data.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: html }}>
    </main>
  )
}

Options

See markdown-loader for options to enable parsing inline HTML.

Typescript

To make typescript understand .md imports, add the following to next-env.d.ts:

/// <reference types="@stefanprobst/next-markdown" />