Aug 29, 2020 · Aug 26, 2020 · Aug 26, 2020 · Aug 26, 2020 · Aug 27, 2020 · Aug 27, 2020
diff --git a/examples/with-mdx-remote/README.md b/examples/with-mdx-remote/README.md
 # 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`.In this example, themdx content is loaded from a local folder, but it could be loaded from a database or anywhere else. The demo 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.
 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`.Themdx content is loaded from a local folder, but it could be loaded from a database or anywhere else.

 Since `next-remote-watch` uses undocumented Next.js APIs, it doesn't replace the default `dev` script for this example. To use it, run `yarn dev:watch` or `npm run dev:watch`.
 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


 ## How to use

 ### Using `create-next-app`

 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:

 ```bash
 npx create-next-app --example with-mdx with-mdx-remote-app
 npx create-next-app --example with-mdx-remote with-mdx-remote-app
 # or
 yarn create next-app --example with-mdx with-mdx-remote-app
 ```

 ### Download manually

 Download the example:

 ```bash
 curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-mdx-remote
 cd with-mdx-remote
 ```

 Install it and run:

 ```bash
 npm install
 npm run dev
 # or
 yarn
 yarn dev
 yarn create next-app --example with-mdx-remote with-mdx-remote-app
 ```

 Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
 For example, here's how you can change `getStaticProps` to conditionally add certain components:

 ```js
 import dynamic from "next/dynamic"
 ...
 import dynamic from 'next/dynamic'

 // ...

 export async function getStaticProps() {
  const { content, data } = matter(source)

  const components = {
    ...defaultComponents,
    SomeHeavyComponent: /<SomeHeavyComponent/.test(content) ? dynamic(() => import("SomeHeavyComponent")) : null,
    SomeHeavyComponent: /<SomeHeavyComponent/.test(content)
      ? dynamic(() => import('SomeHeavyComponent'))
      : null,
  }

  const mdxSource = await renderToString(content, {
    components,
    ...otherOptions,
  })
  const mdxSource = await renderToString(content, { components })
 }
 ```

 If you do this, you'll need toalsocheck in the page render function which components need to be dynamically loaded. You can pass a list ofcomponents names via `getStaticProps` to accomplish this.
 If you do this, you'llalsoneed to check in the page render function which components need to be dynamically loaded. You can pass a list ofcomponent names via `getStaticProps` to accomplish this.
Original file line number	Diff line number	Diff line change
		@@ -1,8 +1,10 @@
		# 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`.In this example, themdx content is loaded from a local folder, but it could be loaded from a database or anywhere else. The demo 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.
		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`.Themdx content is loaded from a local folder, but it could be loaded from a database or anywhere else.

		Since `next-remote-watch` uses undocumented Next.js APIs, it doesn't replace the default `dev` script for this example. To use it, run `yarn dev:watch` or `npm run dev:watch`.
		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

Expand All		@@ -12,33 +14,12 @@ Deploy the example using [Vercel](https://vercel.com):

		## How to use

		### Using `create-next-app`

		Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:

		```bash
		npx create-next-app --example with-mdx with-mdx-remote-app
		npx create-next-app --example with-mdx-remote with-mdx-remote-app
		# or
		yarn create next-app --example with-mdx with-mdx-remote-app
		```

		### Download manually

		Download the example:

		```bash
		curl https://codeload.github.com/vercel/next.js/tar.gz/canary \| tar -xz --strip=2 next.js-canary/examples/with-mdx-remote
		cd with-mdx-remote
		```

		Install it and run:

		```bash
		npm install
		npm run dev
		# or
		yarn
		yarn dev
		yarn create next-app --example with-mdx-remote with-mdx-remote-app
		```

		Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
Expand All		@@ -52,22 +33,22 @@ When using `next-mdx-remote`, you can pass custom components to the MDX renderer
		For example, here's how you can change `getStaticProps` to conditionally add certain components:

		```js
		import dynamic from "next/dynamic"
		...
		import dynamic from 'next/dynamic'

		// ...

		export async function getStaticProps() {
		const { content, data } = matter(source)

		const components = {
		...defaultComponents,
		SomeHeavyComponent: /<SomeHeavyComponent/.test(content) ? dynamic(() => import("SomeHeavyComponent")) : null,
		SomeHeavyComponent: /<SomeHeavyComponent/.test(content)
		? dynamic(() => import('SomeHeavyComponent'))
		: null,
		}

		const mdxSource = await renderToString(content, {
		components,
		...otherOptions,
		})
		const mdxSource = await renderToString(content, { components })
		}
		```

		If you do this, you'll need toalsocheck in the page render function which components need to be dynamically loaded. You can pass a list ofcomponents names via `getStaticProps` to accomplish this.
		If you do this, you'llalsoneed to check in the page render function which components need to be dynamically loaded. You can pass a list ofcomponent names via `getStaticProps` to accomplish this.