archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Revert "Improvements to the MDX Docs and replaced a leftover reference to babel" (#36066)

Browse source 
Reverts vercel/next.js#35332
This commit is contained in:
Rich Haines 2022-04-11 18:11:35 +02:00 committed by GitHub
parent 93678b569b
commit d38a46e2e4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 2 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
docs/advanced-features/using-mdx.md
View file

@ -56,27 +56,6 @@ The following steps outline how to setup `@next/mdx` in your Next.js project:
})
```
> Using MDX plugins will require using next.config.mjs because all the plugins are [ECMAScript modules](https://nodejs.org/api/esm.html)
```js
// next.config.mjs
import createMDX from '@next/mdx'
const withMDX = createMDX({
extension: /\.mdx?$/,
options: {
remarkPlugins: [],
rehypePlugins: [],
// If you use `MDXProvider`, uncomment the following line.
// providerImportSource: "@mdx-js/react",
},
})
module.exports = withMDX({
// Append the default value with md extensions
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
})
```
3. Create a new MDX page within the `/pages` directory:
```bash
@ -85,14 +64,6 @@ The following steps outline how to setup `@next/mdx` in your Next.js project:
- package.json
```
## next-mdx-remote
On a remote database, use next-mdx-remote https://github.com/hashicorp/next-mdx-remote
## @mdx-js/mdx
Handle mdx strings client side, probably @mdx-js/mdx see official docs https://mdxjs.com/docs/getting-started/
## Using Components, Layouts and Custom Elements
You can now import a React component directly inside your MDX page:
@ -115,7 +86,7 @@ Checkout my React component:
### Frontmatter
Frontmatter is a YAML like key/value pairing that can be used to store data about a page. `@next/mdx` does **not** support frontmatter by default, though there are many solutions for adding frontmatter to your MDX content, such as [gray-matter](https://github.com/jonschlinkert/gray-matter) using [remark-frontmatter](https://github.com/remarkjs/remark-frontmatter).
Frontmatter is a YAML like key/value pairing that can be used to store data about a page. `@next/mdx` does **not** support frontmatter by default, though there are many solutions for adding frontmatter to your MDX content, such as [gray-matter](https://github.com/jonschlinkert/gray-matter).
To access page metadata with `@next/mdx`, you can export a meta object from within the `.mdx` file:
@ -127,26 +98,6 @@ author: 'Rich Haines'
# My MDX page
```
```js
// next.config.mjs
import createMDX from '@next/mdx'
import remarkFrontmatter from 'remark-frontmatter'
const withMDX = createMDX({
extension: /\.mdx?$/,
options: {
remarkPlugins: [remarkFrontmatter],
rehypePlugins: [],
// If you use `MDXProvider`, uncomment the following line.
// providerImportSource: "@mdx-js/react",
},
})
module.exports = withMDX({
// Append the default value with md extensions
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
})
```
### Layouts
To add a layout to your MDX page, create a new component and import it into the MDX page. Then you can wrap the MDX page with your layout component:
@ -257,8 +208,5 @@ If you use it across the site you may want to add the provider to `_app.js` so a
- [MDX](https://mdxjs.com)
- [`@next/mdx`](https://www.npmjs.com/package/@next/mdx)
- [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote)
- [next-mdx-remote example](https://github.com/vercel/next.js/tree/canary/examples/with-mdx-remote)
- [remark](https://github.com/remarkjs/remark)
- [rehype](https://github.com/rehypejs/rehype)
- [ECMAScript modules](https://nodejs.org/api/esm.html)

2
docs/api-reference/next.config.js/introduction.md
View file

@ -84,4 +84,4 @@ The commented lines are the place where you can put the configs allowed by `next
However, none of the configs are required, and it's not necessary to understand what each config does. Instead, search for the features you need to enable or modify in this section and they will show you what to do.
> Avoid using new JavaScript features not available in your target Node.js version. `next.config.js` will not be parsed by Webpack, the compiler or TypeScript.
> Avoid using new JavaScript features not available in your target Node.js version. `next.config.js` will not be parsed by Webpack, Babel or TypeScript.