## Description This PR ensures that the default prettier config is used for examples and templates. This config is compatible with `prettier@3` as well (upgrading prettier is bigger change that can be a future PR). ## Changes - Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will be needed upgrading to prettier@3) - Added `examples/.prettierrc.json` with default config (this will change every example) - Added `packages/create-next-app/templates/.prettierrc.json` with default config (this will change every template) ## Related - Fixes #54402 - Closes #54409
3.3 KiB
MDX Remote Example
This example shows how a simple blog might be built using the 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, 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:
How to use
Execute create-next-app
with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example with-mdx-remote with-mdx-remote-app
yarn create next-app --example with-mdx-remote with-mdx-remote-app
pnpm create next-app --example with-mdx-remote with-mdx-remote-app
Deploy it to the cloud with Vercel (Documentation).
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.
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,
},
};
}