SandpackCSS

pmndrs · Aug 25, 2024 · 6a42ca5 · 6a42ca5
1 parent 8bb9590
commit 6a42ca5
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 616 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,7 +5,7 @@ import type { Metadata } from 'next'
 import { ThemeProvider } from 'next-themes'
 import { Inconsolata, Inter } from 'next/font/google'
 import './globals.css'
-import './sandpack.css'
+import { SandpackCSS } from './sandpack-styles'
 
 const inter = Inter({ subsets: ['latin'] })
 const inconsolata = Inconsolata({ subsets: ['latin'] })
@@ -57,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
+}