diff --git a/sandpack-react/src/styles/index.ts b/sandpack-react/src/styles/index.ts index 97873ca80..d7606e17c 100644 --- a/sandpack-react/src/styles/index.ts +++ b/sandpack-react/src/styles/index.ts @@ -12,11 +12,10 @@ import { createStitchesMock } from "./stitches-mock"; export const THEME_PREFIX = "sp"; const getNodeProcess = (): false | string | undefined => { - if (typeof process !== "undefined") { - return process.env.SANDPACK_BARE_COMPONENTS; - } - - return false; + return ( + process.env.SANDPACK_BARE_COMPONENTS || + process.env.NEXT_PUBLIC_SANDPACK_BARE_COMPONENTS + ); }; /** diff --git a/website/docs/src/pages/getting-started/layout.mdx b/website/docs/src/pages/getting-started/layout.mdx index 4ef2c5096..e2a9d055e 100644 --- a/website/docs/src/pages/getting-started/layout.mdx +++ b/website/docs/src/pages/getting-started/layout.mdx @@ -34,7 +34,7 @@ This pattern is compatible with most modern styling systems, including Tailwind, `@codesanbdox/sandpack-react` relies on [@stitches/core](https://github.com/stitchesjs/stitches) to style its component, which is almost zero-runtime CSS-in-JS framework. However, if you want to get rid of any runtime script or create your own style on top of Sandpack components, we provide a way to return bare components, which will eliminate all Sandpack CSS style. -To do it, you need to pass `SANDPACK_BARE_COMPONENTS` environment variable as `true`, which will remove the Stitches dependency, its execution and return only the HTML of the components. +To do it, you need to pass `SANDPACK_BARE_COMPONENTS` environment variable (`NEXT_PUBLIC_SANDPACK_BARE_COMPONENTS` for Nextjs) as `true`, which will remove the Stitches dependency, its execution and return only the HTML of the components. ## Themes