https://github.com/arn4v/next-mdx-builder
Next.js plugin that adds support for MDX pages via `next-mdx-remote`
https://github.com/arn4v/next-mdx-builder
mdx nextjs react
Last synced: 3 months ago
JSON representation
Next.js plugin that adds support for MDX pages via `next-mdx-remote`
- Host: GitHub
- URL: https://github.com/arn4v/next-mdx-builder
- Owner: arn4v
- Created: 2021-07-31T12:41:53.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-08-02T12:45:07.000Z (almost 4 years ago)
- Last Synced: 2024-06-04T22:18:19.870Z (12 months ago)
- Topics: mdx, nextjs, react
- Language: JavaScript
- Homepage: https://npmjs.org/package/next-mdx-builder
- Size: 131 KB
- Stars: 8
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# next-mdx-builder
Next.js plugin that adds MDX pages support via next-mdx-remote & a custom Webpack plugin.
## Note
- This has only been tested with Next.js 11 (Webpack 5).
- Requires Node.js >= 14
## Install
```shell
yarn add next-mdx-builder
```
```shell
npm i --save next-mdx-builder
```
## API Reference
```ts
type PluginOptions = SerializeOptions;
```
SerializeOptions: https://github.com/hashicorp/next-mdx-remote/blob/main/src/types.ts#L2
## Usage
#### Plugin
Add and configure plugin in `next.config.js`:
```js
// next.config.js
const withMdxBuilder = require("next-mdx-builder")({
mdxOptions: {
remarkPlugins: [require("remark-gfm")],
rehypePlugins: [require("mdx-prism")],
},
});
module.exports = withMdxBuilder(/** Next Config */ {});
```
#### pages
**Directory tree:**
```
- layouts/
- docs.jsx
- pages/
- docs/
- introduction.mdx
```
**MDX (pages/docs/introduction.mdx):**
```markdown
---
title: Introduction
layout: "../../layouts/docs"
---
# Docs Introduction Page
```
**Layout:**
```jsx
export default function DocsPage({ children, frontMatter }) {
return (
<>
{frontMatter.title}
{children}
>
);
}
```
## Acknowledgements
- Modeled after [hashicorp/next-mdx-enhanced](https://github.com/hashicorp/next-mdx-enhanced) and [shuding/nextra](https://github.com/shuding/nextra)