Note: this plugin will be treated as a beta version until v1.0.0 is released.

Using the @markdoc/next.js plugin allows you to create custom .md and .mdoc pages in your Next.js apps, and automatically render them with markdoc.


The first thing you’ll need to do is install @markdoc/next.js and add it to your project’s config.

  1. From your project, run this command to install @markdoc/next.js:

    npm install @markdoc/next.js
  2. Open next.config.js and add the following code:

    // next.config.js
    const withMarkdoc = require('@markdoc/next.js');
    module.exports = withMarkdoc(/* options */)({
      pageExtensions: ['js', 'md'],
  3. Create a new Markdoc file in pages/docs named getting-started.md.

    ├── _app.js
    ├── docs
    │   └── getting-started.md
    ├── index.js
  4. Add some content to getting-started.md:

    title: Get started with Markdoc
    description: How to get started with Markdoc
    # Get started with Markdoc

See our docs for more options.


Contributions and feedback are welcomed and encouraged. Feel free to open PRs here, or open issues in the Markdoc core repo.

Follow these steps to set up the project:

  1. Run npm install
  2. Run npm test

Code of conduct

This project has adopted the Stripe Code of conduct.


This project uses the MIT license.


View Github