84 lines
3.3 KiB
Markdown
84 lines
3.3 KiB
Markdown
# MDX Remote Example
|
|
|
|
This example shows how a simple blog might be built using the [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote) library, which allows mdx content to be loaded via `getStaticProps` or `getServerSideProps`. The mdx content is loaded from a local folder, but it could be loaded from a database or anywhere else.
|
|
|
|
The example also showcases [next-remote-watch](https://github.com/hashicorp/next-remote-watch), a library that allows next.js to watch files outside the `pages` folder that are not explicitly imported, which enables the mdx content here to trigger a live reload on change.
|
|
|
|
Since `next-remote-watch` uses undocumented Next.js APIs, it doesn't replace the default `dev` script for this example. To use it, run `npm run dev:watch` or `yarn dev:watch`.
|
|
|
|
## Deploy your own
|
|
|
|
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
|
|
|
[](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mdx-remote&project-name=with-mdx-remote&repository-name=with-mdx-remote)
|
|
|
|
## How to use
|
|
|
|
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
|
|
|
|
```bash
|
|
npx create-next-app --example with-mdx-remote with-mdx-remote-app
|
|
```
|
|
|
|
```bash
|
|
yarn create next-app --example with-mdx-remote with-mdx-remote-app
|
|
```
|
|
|
|
```bash
|
|
pnpm create next-app --example with-mdx-remote with-mdx-remote-app
|
|
```
|
|
|
|
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
|
|
|
|
## Notes
|
|
|
|
### Conditional custom components
|
|
|
|
When using `next-mdx-remote`, you can pass custom components to the MDX renderer. However, some pages/MDX files might use components that are used infrequently, or only on a single page. To avoid loading those components on every MDX page, you can use `next/dynamic` to conditionally load them.
|
|
|
|
For example, here's how you can change `getStaticProps` to pass a list of component names, checking the names in the page render function to see which components need to be dynamically loaded.
|
|
|
|
```js
|
|
import dynamic from 'next/dynamic'
|
|
import Test from '../components/test'
|
|
|
|
const SomeHeavyComponent = dynamic(() => import('SomeHeavyComponent'))
|
|
|
|
const defaultComponents = { Test }
|
|
|
|
export function SomePage({ mdxSource, componentNames }) {
|
|
const components = {
|
|
...defaultComponents,
|
|
SomeHeavyComponent: componentNames.includes('SomeHeavyComponent')
|
|
? SomeHeavyComponent
|
|
: null,
|
|
}
|
|
|
|
return <MDXRemote {...mdxSource} components={components} />
|
|
}
|
|
|
|
export async function getStaticProps() {
|
|
const source = `---
|
|
title: Conditional custom components
|
|
---
|
|
|
|
Some **mdx** text, with a default component <Test name={title}/> and a Heavy component <SomeHeavyComponent />
|
|
`
|
|
|
|
const { content, data } = matter(source)
|
|
|
|
const componentNames = [
|
|
/<SomeHeavyComponent/.test(content) ? 'SomeHeavyComponent' : null,
|
|
].filter(Boolean)
|
|
|
|
const mdxSource = await serialize(content)
|
|
|
|
return {
|
|
props: {
|
|
mdxSource,
|
|
componentNames,
|
|
},
|
|
}
|
|
}
|
|
```
|