Sandpack with NextJS

2 min read

About

In this post, I will explain how to use the Sandpack editor with MDX files in NextJS app.

Prepare

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

Configurations

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>

Result

Try editing the code below and see the result

Try out Dark vs Light modes
export default function App() {
  return <h1>Hello Sandpack from Knnect</h1>
}