@markdoc/next.js

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.

Setup

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:

   shCopy
   npm install @markdoc/next.js @markdoc/markdoc

2. Open next.config.js and add the following code:

   When using Webpack:

   jsCopy
   // next.config.js
   
   const withMarkdoc = require('@markdoc/next.js');
   
   module.exports = withMarkdoc(/* options */)({
     pageExtensions: ['js', 'md'],
   });

   For Turbopack support, add the following configuration:

   jsCopy
   // next.config.js
   module.exports = withMarkdoc({
     dir: process.cwd(), // Required for Turbopack file resolution
   })({
     pageExtensions: ['js', 'md'],
   });

3. Create a new Markdoc file in pages/docs named getting-started.md.

   pages
   ├── _app.js
   ├── docs
   │   └── getting-started.md
   ├── index.js
   

4. Add some content to getting-started.md:

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

See our docs for more options.

Contributing

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.

License

This project uses the MIT license.