Fix: Upgrade next (#3028)

Author: saddlepaddle

apps/web/client/next.config.ts

@@ -9,9 +9,6 @@ import './src/env';
 
 const nextConfig: NextConfig = {
     devIndicators: false,
-    eslint: {
-        ignoreDuringBuilds: true,
-    },
     ...(process.env.STANDALONE_BUILD === 'true' && { output: 'standalone' }),
 };
 

apps/web/client/package.json

@@ -81,7 +81,7 @@
         "lucide-react": "^0.486.0",
         "mobx-react-lite": "^4.1.0",
         "motion": "^12.23.19",
-        "next": "15.5.4",
+        "next": "16.0.0",
         "next-intl": "^4.0.2",
         "next-themes": "^0.4.6",
         "octokit": "^5.0.3",
@@ -91,10 +91,10 @@
         "prosemirror-commands": "^1.7.1",
         "prosemirror-history": "^1.4.1",
         "prosemirror-keymap": "^1.2.2",
-        "react": "^19.0.0",
+        "react": "19.2.0",
         "react-arborist": "^3.4.3",
         "react-codemirror-merge": "4.23.10",
-        "react-dom": "^19.0.0",
+        "react-dom": "19.2.0",
         "react-hotkeys-hook": "^5.0.1",
         "react-markdown": "^10.1.0",
         "remark-gfm": "^4.0.1",
@@ -118,8 +118,8 @@
         "@tailwindcss/postcss": "^4.0.15",
         "@types/culori": "^4.0.0",
         "@types/node": "^20.14.10",
-        "@types/react": "^19.0.0",
-        "@types/react-dom": "^19.0.0",
+        "@types/react": "19.2.2",
+        "@types/react-dom": "19.2.2",
         "@types/webfontloader": "^1.6.38",
         "eslint": "^9.0.0",
         "postcss": "^8.5.3",
@@ -129,5 +129,9 @@
     },
     "ct3aMetadata": {
         "initVersion": "7.39.2"
+    },
+    "overrides": {
+        "@types/react": "19.2.2",
+        "@types/react-dom": "19.2.2"
     }
 }

apps/web/client/src/app/project/[id]/_components/canvas/frame/view.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { type FileEntry } from '@onlook/file-system/hooks';
 import { pathsEqual } from '@onlook/utility';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
@@ -32,7 +34,7 @@ export const FileTree = ({
     const inputRef = useRef<HTMLInputElement>(null);
     const [searchQuery, setSearchQuery] = useState('');
     const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);
-    const { ref: treeContainerRef, width: filesWidth, height: filesHeight } = useResizeObserver();
+    const { ref: resizeObserverRef, width: filesWidth, height: filesHeight } = useResizeObserver();
 
     // Create flat entry index for efficient operations
     const flatEntryIndex = useMemo(() => {
@@ -190,7 +192,7 @@ export const FileTree = ({
                 onRefresh={onRefresh}
                 onKeyDown={handleKeyDown}
             />
-            <div ref={treeContainerRef} className="w-full text-xs px-2 flex-1 min-h-0">
+            <div ref={resizeObserverRef} className="w-full text-xs px-2 flex-1 min-h-0">
                 {isLoading ? (
                     <div className="flex flex-col justify-start items-center h-full text-sm text-foreground/50 pt-4">
                         <div className="animate-spin h-6 w-6 border-2 border-foreground-hover rounded-full border-t-transparent mb-2"></div>

apps/web/client/src/app/project/[id]/_components/left-panel/code-panel/code-tab/sidebar/file-tree.tsx

@@ -389,8 +389,10 @@ export const NewSelectFolder = () => {
                         type="file"
                         style={{ display: 'none' }}
                         onChange={handleFileInputChange}
-                        directory=""
-                        webkitdirectory=""
+                        {...({
+                            directory: '',
+                            webkitdirectory: '',
+                        } as React.InputHTMLAttributes<HTMLInputElement>)}
                     />
                 </motion.div>
             );

apps/web/client/src/app/projects/import/local/_components/select-folder.tsx

@@ -1,7 +1,7 @@
 import { updateSession } from '@/utils/supabase/middleware';
 import { type NextRequest } from 'next/server';
 
-export async function middleware(request: NextRequest) {
+export async function proxy(request: NextRequest) {
     // update user's auth session
     return await updateSession(request);
 }

apps/web/client/src/middleware.ts apps/web/client/src/proxy.tsapps/web/client/src/middleware.ts renamed to apps/web/client/src/proxy.ts

@@ -13,12 +13,10 @@ Onlook provides a range of features to help designers and developers work togeth
 ## Key Features
 
 <Cards>
-  <Card title="Visual Editor" href="#" />
-  <Card title="Code Integration" href="#" />
-  <Card title="AI Assistance" href="#" />
-  <Card title="Figma to Onlook" href="#" />
-  <Card title="Theme System" href="#" />
-  <Card title="Deployment" href="#" />
+  <Card title="Visual Editor" href="#visual-editor" />
+  <Card title="Code Integration" href="#code-integration" />
+  <Card title="AI Assistance" href="#ai-assistance" />
+  <Card title="Figma to Onlook" href="#figma-to-onlook" />
 </Cards>
 
 ## Visual Editor

bun.lock

@@ -1,5 +1,5 @@
 /** @type {import('next-sitemap').IConfig} */
-module.exports = {
+export default {
   siteUrl: 'https://docs.onlook.dev',
   generateRobotsTxt: false, // handled by route handler
   generateIndexSitemap: true,

docs/content/docs/getting-started/core-features.mdx

@@ -15,24 +15,24 @@
     },
     "dependencies": {
         "@onlook/ui": "*",
-        "fumadocs-core": "^15.6.9",
-        "fumadocs-mdx": "^11.7.4",
-        "fumadocs-ui": "^15.6.9",
-        "next": ">=15.4.7",
-        "next-sitemap": "^4.2.3",
-        "react": "^19.1.0",
-        "react-dom": "^19.1.0"
+        "fumadocs-core": "16.0.2",
+        "fumadocs-mdx": "13.0.0",
+        "fumadocs-ui": "16.0.2",
+        "next": "16.0.0",
+        "next-sitemap": "4.2.3",
+        "react": "19.2.0",
+        "react-dom": "19.2.0"
     },
     "devDependencies": {
         "@onlook/eslint": "*",
         "@types/node": "22.15.12",
-        "@types/react": "^19.1.3",
-        "@types/react-dom": "^19.1.3",
-        "eslint": "^9.0.0",
-        "typescript": "^5.5.4",
-        "@types/mdx": "^2.0.13",
-        "@tailwindcss/postcss": "^4.1.5",
-        "tailwindcss": "^4.1.5",
-        "postcss": "^8.5.3"
+        "@types/react": "19.2.2",
+        "@types/react-dom": "19.2.2",
+        "eslint": "9.0.0",
+        "typescript": "5.5.4",
+        "@types/mdx": "2.0.13",
+        "@tailwindcss/postcss": "4.1.5",
+        "tailwindcss": "4.1.5",
+        "postcss": "8.5.3"
     }
 }