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