Update next to 16.1.6

ui/litellm-dashboard/next.config.mjs

@@ -3,10 +3,9 @@ const nextConfig = {
   output: "export",
   basePath: "",
   assetPrefix: "/litellm-asset-prefix", // If a server_root_path is set, this will be overridden by runtime injection
-};
-
-nextConfig.experimental = {
-  missingSuspenseWithCSRBailout: false,
+  turbopack: {
+    root: ".", // Explicitly set the project root to silence the multiple lockfiles warning
+  },
 };
 
 export default nextConfig;

ui/litellm-dashboard/package.json

@@ -17,6 +17,7 @@
     "e2e:ui": "playwright test --ui --config e2e_tests/playwright.config.ts"
   },
   "dependencies": {
+    "@ant-design/v5-patch-for-react-19": "^1.0.3",
     "@anthropic-ai/sdk": "^0.54.0",
     "@docusaurus/theme-mermaid": "^3.9.0",
     "@headlessui/react": "^1.7.18",
@@ -35,7 +36,7 @@
     "jwt-decode": "^4.0.0",
     "lucide-react": "^0.513.0",
     "moment": "^2.30.1",
-    "next": "^14.2.32",
+    "next": "^16.1.6",
     "openai": "^4.93.0",
     "papaparse": "^5.5.2",
     "react": "^18",
@@ -68,8 +69,8 @@
     "@vitest/ui": "^3.2.4",
     "autoprefixer": "^10.4.17",
     "dotenv": "^17.2.3",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.32",
+    "eslint": "^9.39.2",
+    "eslint-config-next": "15.5.10",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-unused-imports": "^4.2.0",
     "jsdom": "^27.0.0",

ui/litellm-dashboard/src/app/(dashboard)/layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 import Navbar from "@/components/navbar";
 import { ThemeProvider } from "@/contexts/ThemeContext";
 import Sidebar2 from "@/app/(dashboard)/components/Sidebar2";
@@ -22,7 +22,7 @@ function withBase(path: string): string {
 }
 /** -------------------------------- */
 
-export default function Layout({ children }: { children: React.ReactNode }) {
+function LayoutContent({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { accessToken, userRole, userId, userEmail, premiumUser } = useAuthorized();
@@ -71,3 +71,11 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     </ThemeProvider>
   );
 }
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <Suspense fallback={<div className="flex items-center justify-center min-h-screen">Loading...</div>}>
+      <LayoutContent>{children}</LayoutContent>
+    </Suspense>
+  );
+}

ui/litellm-dashboard/src/app/layout.tsx

@@ -1,3 +1,4 @@
+import "@ant-design/v5-patch-for-react-19";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";

ui/litellm-dashboard/src/app/mcp/oauth/callback/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo } from "react";
+import { Suspense, useEffect, useMemo } from "react";
 import { useSearchParams } from "next/navigation";
 
 const RESULT_STORAGE_KEY = "litellm-mcp-oauth-result";
@@ -21,7 +21,7 @@ const resolveDefaultRedirect = () => {
   return "/";
 };
 
-const McpOAuthCallbackPage = () => {
+const McpOAuthCallbackContent = () => {
   const searchParams = useSearchParams();
 
   const payload = useMemo(() => {
@@ -67,4 +67,12 @@ const McpOAuthCallbackPage = () => {
   );
 };
 
+const McpOAuthCallbackPage = () => {
+  return (
+    <Suspense fallback={<div className="min-h-screen flex items-center justify-center">Loading...</div>}>
+      <McpOAuthCallbackContent />
+    </Suspense>
+  );
+};
+
 export default McpOAuthCallbackPage;

ui/litellm-dashboard/src/app/model_hub/page.tsx

@@ -1,9 +1,9 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import PublicModelHubPage from "@/components/public_model_hub";
 
-export default function PublicModelHub() {
+function PublicModelHubContent() {
   const searchParams = useSearchParams()!;
   const key = searchParams.get("key");
   const [accessToken, setAccessToken] = useState<string | null>(null);
@@ -14,9 +14,14 @@ export default function PublicModelHub() {
     }
     setAccessToken(key);
   }, [key]);
-  /**
-   * populate navbar
-   *
-   */
+
   return <PublicModelHubPage accessToken={accessToken} />;
 }
+
+export default function PublicModelHub() {
+  return (
+    <Suspense fallback={<div className="flex items-center justify-center min-h-screen">Loading...</div>}>
+      <PublicModelHubContent />
+    </Suspense>
+  );
+}

ui/litellm-dashboard/src/app/model_hub_table/page.tsx

@@ -1,12 +1,12 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import ModelHubTable from "@/components/AIHub/ModelHubTable";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 const queryClient = new QueryClient();
 
-export default function PublicModelHubTable() {
+function PublicModelHubTableContent() {
   const searchParams = useSearchParams()!;
   const key = searchParams.get("key");
   const [accessToken, setAccessToken] = useState<string | null>(null);
@@ -18,13 +18,18 @@ export default function PublicModelHubTable() {
     }
     setAccessToken(key);
   }, [key]);
-  /**
-   * populate navbar
-   *
-   */
+
   return (
     <QueryClientProvider client={queryClient}>
       <ModelHubTable accessToken={accessToken} publicPage={true} premiumUser={false} userRole={null} />
     </QueryClientProvider>
   );
 }
+
+export default function PublicModelHubTable() {
+  return (
+    <Suspense fallback={<div className="flex items-center justify-center min-h-screen">Loading...</div>}>
+      <PublicModelHubTableContent />
+    </Suspense>
+  );
+}

ui/litellm-dashboard/src/app/onboarding/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import { Card, Title, Text, TextInput, Callout, Button, Grid, Col } from "@tremor/react";
 import { RiCheckboxCircleLine } from "@remixicon/react";
@@ -13,7 +13,7 @@ import { jwtDecode } from "jwt-decode";
 import { Form, Button as Button2 } from "antd";
 import { getCookie } from "@/utils/cookieUtils";
 
-export default function Onboarding() {
+function OnboardingContent() {
   const [form] = Form.useForm();
   const searchParams = useSearchParams()!;
   const token = getCookie("token");
@@ -140,3 +140,11 @@ export default function Onboarding() {
     </div>
   );
 }
+
+export default function Onboarding() {
+  return (
+    <Suspense fallback={<div className="flex items-center justify-center min-h-screen">Loading...</div>}>
+      <OnboardingContent />
+    </Suspense>
+  );
+}

ui/litellm-dashboard/src/app/page.tsx

@@ -43,7 +43,7 @@ import { isJwtExpired } from "@/utils/jwtUtils";
 import { isAdminRole } from "@/utils/roles";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { jwtDecode } from "jwt-decode";
-import { useSearchParams } from "next/navigation";
+import { useSearchParams, ReadonlyURLSearchParams } from "next/navigation";
 import { Suspense, useEffect, useState } from "react";
 import { ConfigProvider, theme } from "antd";
 
@@ -101,7 +101,7 @@ interface ProxySettings {
 
 const queryClient = new QueryClient();
 
-export default function CreateKeyPage() {
+function CreateKeyPageContent() {
   const [userRole, setUserRole] = useState("");
   const [premiumUser, setPremiumUser] = useState(false);
   const [disabledPersonalKeyCreation, setDisabledPersonalKeyCreation] = useState(false);
@@ -598,3 +598,11 @@ export default function CreateKeyPage() {
     </Suspense>
   );
 }
+
+export default function CreateKeyPage() {
+  return (
+    <Suspense fallback={<LoadingScreen />}>
+      <CreateKeyPageContent />
+    </Suspense>
+  );
+}

ui/litellm-dashboard/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -10,7 +14,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -18,9 +22,22 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
-    }
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules", "e2e_tests", "scripts"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "e2e_tests",
+    "scripts"
+  ]
 }