✨ feat: upgrade to next15 and react19 (lobehub#4450)

* ♻️ refactor: upgrade next to 15

* refactor to serverExternalPackages

Author: arvinxx

next.config.mjs next.config.ts

@@ -1,6 +1,7 @@
 import analyzer from '@next/bundle-analyzer';
 import { withSentryConfig } from '@sentry/nextjs';
 import withSerwistInit from '@serwist/next';
+import type { NextConfig } from 'next';
 import ReactComponentName from 'react-scan/react-component-name/webpack';
 
 const isProd = process.env.NODE_ENV === 'production';
@@ -13,8 +14,7 @@ const API_PROXY_ENDPOINT = process.env.API_PROXY_ENDPOINT || '';
 
 const basePath = process.env.NEXT_PUBLIC_BASE_PATH;
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+const nextConfig: NextConfig = {
   basePath,
   compress: isProd,
   experimental: {
@@ -27,7 +27,6 @@ const nextConfig = {
       'gpt-tokenizer',
       'chroma-js',
     ],
-    serverComponentsExternalPackages: ['@electric-sql/pglite'],
     webVitalsAttribution: ['CLS', 'LCP'],
   },
 
@@ -107,7 +106,6 @@ const nextConfig = {
       },
     ];
   },
-
   output: buildWithDocker ? 'standalone' : undefined,
   reactStrictMode: true,
   redirects: async () => [
@@ -169,13 +167,14 @@ const nextConfig = {
       source: '/welcome',
     },
   ],
-
   rewrites: async () => [
     // due to google api not work correct in some countries
     // we need a proxy to bypass the restriction
     { destination: `${API_PROXY_ENDPOINT}/api/chat/google`, source: '/api/chat/google' },
   ],
 
+  serverExternalPackages: ['@electric-sql/pglite'],
+
   webpack(config) {
     config.experiments = {
       asyncWebAssembly: true,
@@ -206,7 +205,7 @@ const nextConfig = {
   },
 };
 
-const noWrapper = (config) => config;
+const noWrapper = (config: NextConfig) => config;
 
 const withBundleAnalyzer = process.env.ANALYZE === 'true' ? analyzer() : noWrapper;
 
@@ -221,7 +220,7 @@ const withPWA = isProd
 const hasSentry = !!process.env.NEXT_PUBLIC_SENTRY_DSN;
 const withSentry =
   isProd && hasSentry
-    ? (c) =>
+    ? (c: NextConfig) =>
         withSentryConfig(
           c,
           {
@@ -262,4 +261,4 @@ const withSentry =
         )
     : noWrapper;
 
-export default withBundleAnalyzer(withPWA(withSentry(nextConfig)));
+export default withBundleAnalyzer(withPWA(withSentry(nextConfig) as NextConfig));

package.json

@@ -39,7 +39,7 @@
     "db:push-test": "NODE_ENV=test drizzle-kit push",
     "db:studio": "drizzle-kit studio",
     "db:z-pull": "drizzle-kit introspect",
-    "dev": "next dev -p 3010",
+    "dev": "next dev --turbo -p 3010",
     "docs:i18n": "lobe-i18n md && npm run lint:mdx",
     "docs:seo": "lobe-seo && npm run lint:mdx",
     "i18n": "npm run workflow:i18n && lobe-i18n",
@@ -130,7 +130,7 @@
     "@lobehub/tts": "^1.25.1",
     "@lobehub/ui": "^1.153.13",
     "@neondatabase/serverless": "^0.10.1",
-    "@next/third-parties": "^14.2.15",
+    "@next/third-parties": "^15.0.0",
     "@react-spring/web": "^9.7.5",
     "@sentry/nextjs": "^7.119.2",
     "@serwist/next": "^9.0.9",
@@ -145,7 +145,7 @@
     "@vercel/speed-insights": "^1.0.12",
     "ahooks": "^3.8.1",
     "ai": "^3.4.16",
-    "antd": "^5.21.4",
+    "antd": "^5.22.6",
     "antd-style": "^3.7.1",
     "brotli-wasm": "^3.0.1",
     "chroma-js": "^2.6.0",
@@ -175,7 +175,7 @@
     "mammoth": "^1.8.0",
     "modern-screenshot": "^4.4.39",
     "nanoid": "^5.0.7",
-    "next": "14.2.8",
+    "next": "^15.1.2",
     "next-auth": "beta",
     "next-mdx-remote": "^4.4.1",
     "nextjs-toploader": "^3.7.15",
@@ -195,9 +195,9 @@
     "pwa-install-handler": "^2.6.1",
     "query-string": "^9.1.1",
     "random-words": "^2.0.1",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "react-confetti": "^6.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
     "react-fast-marquee": "^1.6.5",
     "react-hotkeys-hook": "^4.5.1",
     "react-i18next": "14.0.2",
@@ -244,8 +244,8 @@
     "@lobehub/i18n-cli": "^1.20.0",
     "@lobehub/lint": "^1.24.4",
     "@lobehub/seo-cli": "^1.4.2",
-    "@next/bundle-analyzer": "^14.2.15",
-    "@next/eslint-plugin-next": "^14.2.15",
+    "@next/bundle-analyzer": "^15.0.0",
+    "@next/eslint-plugin-next": "^15.0.0",
     "@peculiar/webcrypto": "^1.5.0",
     "@semantic-release/exec": "^6.0.3",
     "@testing-library/jest-dom": "^6.6.2",

src/layout/GlobalProvider/AntdV5MonkeyPatch.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useEffect } from "react";
+import { unstableSetRender } from "antd";
+import { createRoot } from "react-dom/client";
+
+const AntdV5MonkeyPatch = () => {
+  useEffect(() => {
+    unstableSetRender((node, container) => {
+      const root = createRoot(container);
+      root.render(node);
+      return async () => {
+        root.unmount();
+      };
+    });
+  }, []);
+  return null;
+};
+
+export default AntdV5MonkeyPatch;

src/layout/GlobalProvider/index.tsx

@@ -17,6 +17,7 @@ import { ServerConfigStoreProvider } from '@/store/serverConfig';
 import { getAntdLocale } from '@/utils/locale';
 import { isMobileDevice } from '@/utils/server/responsive';
 
+import AntdV5MonkeyPatch from './AntdV5MonkeyPatch';
 import AppTheme from './AppTheme';
 import Debug from './Debug';
 import Locale from './Locale';
@@ -91,6 +92,7 @@ const GlobalLayout = async ({ children }: PropsWithChildren) => {
           <DebugUI />
           <Debug />
         </AppTheme>
+        <AntdV5MonkeyPatch />
       </Locale>
     </StyleRegistry>
   );