⬆️ build: update next to v14 (lobehub#434)

* ⬆️ build: bump next.js * 🎨 style: organize next config to suppress eslint warnings * 🐛 fix: ui flickering when using @ant-design/cssinjs * 🧑‍💻 chore: suppress hydration warning by browser extensions
SilvaneiMartins · Nov 9, 2023 · 53e6589 · 53e6589
1 parent 0cae3cf
commit 53e6589
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 37 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,5 +1,5 @@
+import nextPWA from '@ducanh2912/next-pwa';
 import analyzer from '@next/bundle-analyzer';
-import nextPWA from 'next-pwa';
 
 const isProd = process.env.NODE_ENV === 'production';
 const buildWithDocker = process.env.DOCKER === 'true';
@@ -11,55 +11,64 @@ const withBundleAnalyzer = analyzer({
 const withPWA = nextPWA({
   dest: 'public',
   register: true,
-  skipWaiting: true,
+  workboxOptions: {
+    skipWaiting: true,
+  },
 });
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   compress: isProd,
-  reactStrictMode: true,
+  env: {
+    AGENTS_INDEX_URL: process.env.AGENTS_INDEX_URL ?? '',
+    PLUGINS_INDEX_URL: process.env.PLUGINS_INDEX_URL ?? '',
+  },
+  experimental: {
+    forceSwcTransforms: true,
+    optimizePackageImports: [
+      'modern-screenshot',
+      'emoji-mart',
+      '@emoji-mart/react',
+      '@emoji-mart/data',
+      '@icons-pack/react-simple-icons',
+      'gpt-tokenizer',
+      'chroma-js',
+    ],
+    webVitalsAttribution: ['CLS', 'LCP'],
+  },
   images: {
-    unoptimized: !isProd,
     remotePatterns: [
       {
-        protocol: 'https',
         hostname: 'registry.npmmirror.com',
-        port: '',
         pathname: '/@lobehub/assets-emoji/1.3.0/files/assets/**',
+        port: '',
+        protocol: 'https',
       },
       {
-        protocol: 'https',
         hostname: 'registry.npmmirror.com',
-        port: '',
         pathname: '/@lobehub/assets-emoji-anim/1.0.0/files/assets/**',
+        port: '',
+        protocol: 'https',
       },
       {
-        protocol: 'https',
         hostname: 'registry.npmmirror.com',
-        port: '',
         pathname: '/@lobehub/assets-logo/1.1.0/files/assets/**',
+        port: '',
+        protocol: 'https',
       },
       {
-        protocol: 'https',
         hostname: 'registry.npmmirror.com',
-        port: '',
         pathname: '/@lobehub/assets-favicons/latest/files/assets/**',
+        port: '',
+        protocol: 'https',
       },
     ],
+    unoptimized: !isProd,
   },
-  experimental: {
-    webVitalsAttribution: ['CLS', 'LCP'],
-    forceSwcTransforms: true,
-    optimizePackageImports: [
-      'modern-screenshot',
-      'emoji-mart',
-      '@emoji-mart/react',
-      '@emoji-mart/data',
-      '@icons-pack/react-simple-icons',
-      'gpt-tokenizer',
-      'chroma-js',
-    ],
-  },
+  output: buildWithDocker ? 'standalone' : undefined,
+
+  reactStrictMode: true,
+
   transpilePackages: ['@lobehub/ui', 'antd-style', 'lodash-es'],
 
   webpack(config) {
@@ -68,15 +77,10 @@ const nextConfig = {
       layers: true,
     };
 
-    return config;
-  },
+    config.resolve.alias['@ant-design/cssinjs'] = '@ant-design/cssinjs/lib';
 
-  env: {
-    AGENTS_INDEX_URL: process.env.AGENTS_INDEX_URL,
-    PLUGINS_INDEX_URL: process.env.PLUGINS_INDEX_URL,
+    return config;
   },
-
-  output: buildWithDocker ? 'standalone' : undefined,
 };
 
 export default isProd ? withBundleAnalyzer(withPWA(nextConfig)) : nextConfig;
diff --git a/package.json b/package.json
@@ -92,7 +92,7 @@
     "lucide-react": "latest",
     "modern-screenshot": "^4",
     "nanoid": "^5",
-    "next": "^13.5.3",
+    "next": "^14.0.1",
     "openai": "~4.15.0",
     "polished": "^4",
     "posthog-js": "^1",
@@ -121,10 +121,11 @@
   },
   "devDependencies": {
     "@commitlint/cli": "^18",
+    "@ducanh2912/next-pwa": "^9.7.2",
     "@lobehub/i18n-cli": "latest",
     "@lobehub/lint": "latest",
-    "@next/bundle-analyzer": "^13",
-    "@next/eslint-plugin-next": "^13",
+    "@next/bundle-analyzer": "^14.0.1",
+    "@next/eslint-plugin-next": "^14.0.1",
     "@testing-library/jest-dom": "^6",
     "@testing-library/react": "^14",
     "@types/chroma-js": "^2",
@@ -148,7 +149,6 @@
     "lint-staged": "^15",
     "lodash": "^4",
     "markdown-table": "^3",
-    "next-pwa": "^5",
     "node-fetch": "^3",
     "prettier": "^3",
     "remark-cli": "^11",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -21,7 +21,7 @@ const RootLayout = ({ children }: PropsWithChildren) => {
   const lang = cookieStore.get(LOBE_LOCALE_COOKIE);
 
   return (
-    <html lang={lang?.value || DEFAULT_LANG}>
+    <html lang={lang?.value || DEFAULT_LANG} suppressHydrationWarning>
       <body>
         <StyleRegistry>
           <Layout