fix: sandpack ssr styles (#298)

* fb sandpack.css * SandpackCSS * doc
pmndrs · Aug 25, 2024 · 4e3b34e · 4e3b34e
1 parent 0364106
commit 4e3b34e
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 3 deletions.
diff --git a/docs/getting-started/authoring.mdx b/docs/getting-started/authoring.mdx
@@ -61,7 +61,10 @@ Responsive grid.
 
 #### `Sandpack`
 
-See [Sandpack docs](https://sandpack.codesandbox.io/docs/getting-started/usage).
+Inline sandboxes.
+
+> [!NOTE]
+> See Sandpack [official documentation](https://sandpack.codesandbox.io/docs/getting-started/usage) for full usage.
 
 ```tsx
 <Sandpack
@@ -120,8 +123,15 @@ export default function App() {
  }}
 />
 
+> [!TIP]
+> Sandpack UI SSR-rendering[^1] is also supported (out of the box).
+
+[^1]: https://sandpack.codesandbox.io/docs/guides/ssr#nextjs-app-dir 
+
 </details>
 
+
+
 #### `Codesandbox`
 
 ```md

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import type { Metadata } from 'next'
 import { ThemeProvider } from 'next-themes'
 import { Inconsolata, Inter } from 'next/font/google'
 import './globals.css'
+import { SandpackCSS } from './sandpack-styles'
 
 const inter = Inter({ subsets: ['latin'] })
 const inconsolata = Inconsolata({ subsets: ['latin'] })
@@ -56,6 +57,9 @@ export default function RootLayout({
 }>) {
  return (
  <html lang="en">
+ <head>
+ <SandpackCSS />
+ </head>
  <body className={cn(inter.className, 'bg-surface')}>
  <ThemeProvider
  // attribute="class"

diff --git a/src/app/sandpack-styles.tsx b/src/app/sandpack-styles.tsx
@@ -0,0 +1,16 @@
+// https://sandpack.codesandbox.io/docs/guides/ssr#nextjs-app-dir
+
+'use client'
+
+import { getSandpackCssText } from '@codesandbox/sandpack-react'
+import { useServerInsertedHTML } from 'next/navigation'
+
+/**
+ * Ensures CSSinJS styles are loaded server side.
+ */
+export const SandpackCSS = () => {
+ useServerInsertedHTML(() => {
+ return <style dangerouslySetInnerHTML={{ __html: getSandpackCssText() }} id="sandpack" />
+ })
+ return null
+}
diff --git a/src/components/mdx/index.tsx b/src/components/mdx/index.tsx
@@ -6,7 +6,7 @@ export * from './Toc'
 
 import cn from '@/lib/cn'
 import { MARKDOWN_REGEX } from '@/utils/docs'
-import { Sandpack } from '@codesandbox/sandpack-react'
+import { Sandpack as SP } from '@codesandbox/sandpack-react'
 import { ComponentProps } from 'react'
 
 type Hn = 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
@@ -108,4 +108,8 @@ export const summary = (props: ComponentProps<'summary'>) => (
  <summary className="my-2 -ml-4 cursor-pointer select-none" {...props} />
 )
 
-export { Sandpack }
+export const Sandpack = (props: ComponentProps<typeof SP>) => (
+ <div className="sandpack">
+ <SP {...props} />
+ </div>
+)