In this post, I will explain how to use the Sandpack editor with MDX files in NextJS app.
I'm using next-mdx-remote to render MDX files and @codesandbox/sandpack-react package to add Sandpack editor.
To install them run
npm i next-mdx-remote @codesandbox/sandpack-react
Custom MDX component to render Sandpack editor
Write a custom Sandpack component with the pre-configured theme, Sandpack options etc,
Following is the CustomSandpack component I built to use in MDX content
import { Sandpack } from "@codesandbox/sandpack-react";import { useTheme } from "@mui/material";type CustomSandpackProps = { template: any; filename: string; children: string;};const CustomSandpack = (props: CustomSandpackProps) => { const theme = useTheme(); const { children, filename } = props; return ( <Sandpack template="react-ts" theme={theme.palette.mode} files={{ [filename]: { code: children, active: true }, }} options={{ showLineNumbers: true, showInlineErrors: true, showTabs: false, closableTabs: false, }} /> );};export default CustomSandpack;
Inject the CustomSandpack component to the MDX context
Next, import the CustomSandpack component to the [slug].tsx where the NextJS dynamic routing happens and pass the CustomSandpack component to the MDXRemote via the components prop.
const components: any = { // It also works with dynamically-imported components, which is especially // useful for conditionally loading components for certain routes. // See the notes in README.md for more details. Spack: dynamic(import("../../src/components/blog/CustomSandpack")),};... <MDXRemote {...mdxSource} components={components} />
Use the <Sandpack> element in MDX
Finally, You can use the Sandpack custom component in MDX content as below
<Spack filename="/App.js"> {`export default function App() { return <h1>Hello Sandpack from Knnect</h1> }`}</Spack>
Try out Dark vs Light modesTry editing the code below and see the result