Trying to add monaco

website/next.config.ts

@@ -1,7 +1,18 @@
 import type { NextConfig } from "next";
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      config.plugins.push(
+        new MonacoWebpackPlugin({
+          languages: ['typescript', 'javascript'],
+          filename: 'static/[name].worker.js',
+        })
+      );
+    }
+    return config;
+  },
 };
 
-export default nextConfig;
+export default nextConfig;

website/package.json

@@ -9,15 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "monaco-editor": "^0.52.2",
+    "monaco-editor-webpack-plugin": "^7.1.0",
+    "next": "15.1.7",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.1.7",
     "react-syntax-highlighter": "^15.4.3"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^19",
-    "@types/react-dom": "^19"
+    "@types/react-dom": "^19",
+    "typescript": "^5"
   }
 }

website/src/app/page.tsx

@@ -2,8 +2,7 @@ import styles from "./page.module.css";
 import dynamic from 'next/dynamic';
 
 const CodeExample = dynamic(
-  () => import('../components/CodeExample'),
-  { ssr: false }
+  () => import('../components/CodeExample')
 );
 
 export default function Home() {