Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JS-DevTools/next-mdx
Adds support for MDX with advanced syntax features in Next.js applications
https://github.com/JS-DevTools/next-mdx
javascript mdx nextjs nodejs react rehype-plugin remark-plugin
Last synced: 4 months ago
JSON representation
Adds support for MDX with advanced syntax features in Next.js applications
- Host: GitHub
- URL: https://github.com/JS-DevTools/next-mdx
- Owner: JS-DevTools
- License: mit
- Created: 2020-08-16T22:12:56.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-10-31T13:05:37.000Z (about 4 years ago)
- Last Synced: 2024-08-13T08:21:16.376Z (4 months ago)
- Topics: javascript, mdx, nextjs, nodejs, react, rehype-plugin, remark-plugin
- Language: JavaScript
- Homepage:
- Size: 678 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Advanced MDX support for Next.js
==============================================
### Adds support for MDX with advanced syntax features in Next.js applications
[](https://github.com/JS-DevTools/next-mdx/actions)
[](https://github.com/JS-DevTools/next-mdx/actions)
[](https://coveralls.io/github/JS-DevTools/next-mdx)
[](https://david-dm.org/JS-DevTools/next-mdx)
[](https://www.npmjs.com/package/@jsdevtools/next-mdx)
[](LICENSE)
[](https://plant.treeware.earth/JS-DevTools/next-mdx)
This library wraps [the official Next.js + MDX plugin](https://github.com/vercel/next.js/tree/canary/packages/next-mdx) and configures it with additional [Remark](https://github.com/remarkjs/remark) and [Rehype](https://github.com/rehypejs/rehype) plugins to enable advanced Markdown syntax and make MDX easier to use for our specific use-cases.
Features
--------------------------
- Adds support for YAML frontmatter
- Automatically adds `createdAt` and `modifiedAt` frontmatter fields. Useful for populating `` tags for SEO and social media.
- Adds support for a `layout` frontmatter field, which can be used to customize the React layout component to use for each MDX page.
- Passes a `markdown` boolean to React components to indicate whether they originally came from Markdown syntax. This allows you to distinguish between `**bold**` and `bold` which can be used to apply different styling, or even render completely different JSX.
- Rewrites links to MDX files (e.g. `/pages/docs/some-page.mdx` becomes `/pages/docs/some-page`)
- Detects broken links to MDX files
Usage
--------------------------
Install the library via [npm](https://docs.npmjs.com/about-npm/):
```bash
npm install @jsdevtools/next-mdx
```
Then use it in your `next.config.js` file:
```javascript
const nextMDX = require("@jsdevtools/next-mdx");
const withMDX = nextMDX({
// Next-MDX options go here
siteURL: "http://example.com"
});
module.exports = withMDX({
// Next.js options go here
pageExtensions: ["tsx", "mdx"],
});
```
Options
--------------------------------
See [`options.ts`](src/options.ts) for all of the options that you can pass to Next-MDX.
> **NOTE:** Don't confuse the Next-MDX options with the Next.js options.
> Refer to the code example above to see where each goes.
Contributing
--------------------------
Contributions, enhancements, and bug-fixes are welcome! [Open an issue](https://github.com/JS-DevTools/next-mdx/issues) on GitHub and [submit a pull request](https://github.com/JS-DevTools/next-mdx/pulls).
#### Building
To build the project locally on your computer:
1. __Clone this repo__
`git clone https://github.com/JS-DevTools/next-mdx.git`
2. __Install dependencies__
`npm install`
3. __Build the code__
`npm run build`
4. __Run the tests__
`npm test`
License
--------------------------
Next MDX is 100% free and open-source, under the [MIT license](LICENSE). Use it however you want.
This package is [Treeware](http://treeware.earth). If you use it in production, then we ask that you [**buy the world a tree**](https://plant.treeware.earth/JS-DevTools/next-mdx) to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.
Big Thanks To
--------------------------
Thanks to these awesome companies for their support of Open Source developers ❤
[](https://github.com/open-source)
[](https://www.npmjs.com/)
[](https://coveralls.io)
[](https://travis-ci.com)
[](https://saucelabs.com)