Skip to content

Commit

Permalink
Revert "Improvements to the MDX Docs and replaced a leftover referenc…
Browse files Browse the repository at this point in the history
…e to babel" (#36066)

Reverts #35332
  • Loading branch information
molebox committed Apr 11, 2022
1 parent 93678b5 commit d38a46e
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 54 deletions.
54 changes: 1 addition & 53 deletions docs/advanced-features/using-mdx.md
Expand Up @@ -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
Expand All @@ -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:
Expand All @@ -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:

Expand All @@ -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:
Expand Down Expand Up @@ -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 changes: 1 addition & 1 deletion docs/api-reference/next.config.js/introduction.md
Expand Up @@ -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.

0 comments on commit d38a46e

Please sign in to comment.