ソースを参照

Update Next.js configuration and enhance layout component with Suspense

- Added `cacheComponents` option to the Next.js configuration for improved performance.
- Wrapped the layout component in a `Suspense` boundary to enable better handling of asynchronous rendering, enhancing user experience during loading states.
0es 1 ヶ月 前
コミット
634a67b128
2 ファイル変更21 行追加17 行削除
  1. 1 0
      next.config.ts
  2. 20 17
      src/app/layout.tsx

+ 1 - 0
next.config.ts

@@ -3,6 +3,7 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   /* config options here */
   reactCompiler: true,
+  cacheComponents: true,
 };
 
 export default nextConfig;

+ 20 - 17
src/app/layout.tsx

@@ -5,6 +5,7 @@ import "@wangeditor/editor/dist/css/style.css";
 import "./globals.css";
 import { App, ConfigProvider } from "antd";
 import zhCN from "antd/locale/zh_CN";
+import { Suspense } from "react";
 import { AuthProvider } from "@/contexts/AuthContext";
 import { GlobalConstsProvider } from "@/contexts/GlobalConstsContext";
 
@@ -33,23 +34,25 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <AntdRegistry>
-          <ConfigProvider
-            locale={zhCN}
-            theme={{
-              token: {
-                colorPrimary: "#1890ff",
-              },
-              // cssVar: true,
-            }}
-          >
-            <App>
-              <AuthProvider>
-                <GlobalConstsProvider>{children}</GlobalConstsProvider>
-              </AuthProvider>
-            </App>
-          </ConfigProvider>
-        </AntdRegistry>
+        <Suspense>
+          <AntdRegistry>
+            <ConfigProvider
+              locale={zhCN}
+              theme={{
+                token: {
+                  colorPrimary: "#1890ff",
+                },
+                // cssVar: true,
+              }}
+            >
+              <App>
+                <AuthProvider>
+                  <GlobalConstsProvider>{children}</GlobalConstsProvider>
+                </AuthProvider>
+              </App>
+            </ConfigProvider>
+          </AntdRegistry>
+        </Suspense>
       </body>
     </html>
   );