diff --git a/docs/advanced-features/using-mdx.md b/docs/advanced-features/using-mdx.md index cf95ae24b7..6ed9b3f575 100644 --- a/docs/advanced-features/using-mdx.md +++ b/docs/advanced-features/using-mdx.md @@ -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) diff --git a/docs/api-reference/next.config.js/introduction.md b/docs/api-reference/next.config.js/introduction.md index 418e05e04f..4c7b116436 100644 --- a/docs/api-reference/next.config.js/introduction.md +++ b/docs/api-reference/next.config.js/introduction.md @@ -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.