vercel · samcx · Oct 17, 2024 · Oct 15, 2024 · Oct 15, 2024 · Oct 15, 2024
diff --git a/examples/with-styled-jsx/app/layout.tsx b/examples/with-styled-jsx/app/layout.tsx
@@ -0,0 +1,20 @@
+import StyledJsxRegistry from "./registry";
+
+export const metadata = {
+  title: "Next.js",
+  description: "Generated by Next.js",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <StyledJsxRegistry>
+        <body>{children}</body>
+      </StyledJsxRegistry>
+    </html>
+  );
+}
diff --git a/examples/with-styled-jsx/pages/index.tsx → examples/with-styled-jsx/app/page.tsx b/examples/with-styled-jsx/pages/index.tsx → examples/with-styled-jsx/app/page.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 export default function Home() {
   return (
     <div className="hello">

diff --git a/examples/with-styled-jsx/app/registry.tsx b/examples/with-styled-jsx/app/registry.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import React, { useState } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+import { StyleRegistry, createStyleRegistry } from "styled-jsx";
+
+export default function StyledJsxRegistry({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [jsxStyleRegistry] = useState(() => createStyleRegistry());
+
+  useServerInsertedHTML(() => {
+    const styles = jsxStyleRegistry.styles();
+    jsxStyleRegistry.flush();
+    return <>{styles}</>;
+  });
+
+  return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>;
+}
diff --git a/examples/with-styled-jsx/next-env.d.ts b/examples/with-styled-jsx/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/examples/with-styled-jsx/package.json b/examples/with-styled-jsx/package.json
@@ -1,19 +1,19 @@
 {
   "private": true,
   "scripts": {
-    "dev": "next",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
     "next": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/node": "^18.11.9",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.9",
-    "typescript": "^4.9.3"
+    "@types/node": "^22.7.6",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "typescript": "^5.6.3"
   }
 }
diff --git a/examples/with-styled-jsx/tsconfig.json b/examples/with-styled-jsx/tsconfig.json
@@ -1,20 +1,27 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
+    "strict": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }