Upgrade to Next.js 16

app/(app)/layout.tsx

@@ -2,21 +2,23 @@ import AppShell from "@/components/app-shell";
 import DynamicPostHogIdentifier from "@/providers/posthog-identifier.dynamic";
 import AuthorizedApolloWrapper from "@/providers/use-apollo.rsc";
 import ProtectedRoute from "@/providers/use-protected-route";
-import { unstable_ViewTransition as ViewTransition } from "react";
+import { Suspense, ViewTransition } from "react";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <ProtectedRoute>
-      <AuthorizedApolloWrapper>
-        <AppShell>
-          <div className="mx-auto w-full max-w-7xl flex-1 p-3">
-            <ViewTransition name="app-content">
-              <div suppressHydrationWarning>{children}</div>
-            </ViewTransition>
-          </div>
-        </AppShell>
-        <DynamicPostHogIdentifier />
-      </AuthorizedApolloWrapper>
-    </ProtectedRoute>
+    <Suspense>
+      <ProtectedRoute>
+        <AuthorizedApolloWrapper>
+          <AppShell>
+            <div className="mx-auto w-full max-w-7xl flex-1 p-3">
+              <ViewTransition name="app-content">
+                <div suppressHydrationWarning>{children}</div>
+              </ViewTransition>
+            </div>
+          </AppShell>
+          <DynamicPostHogIdentifier />
+        </AuthorizedApolloWrapper>
+      </ProtectedRoute>
+    </Suspense>
   );
 }

app/login/_components/do-you-know/index.tsx

@@ -5,6 +5,17 @@ import { connection } from "next/server";
 export default async function DoYouKnow() {
   await connection();
 
+  const randomKnow = await getDoYouKnow();
+
+  return (
+    <div className="flex flex-col justify-center gap-2 text-center">
+      <div className="text-sm text-gray-500">你知道嗎？</div>
+      <div className="font-normal">{randomKnow}</div>
+    </div>
+  );
+}
+
+export async function getDoYouKnow() {
   const knowsList = [
     <p key="do-you-knows-daily-login">
       每天登入可以獲得 20 點點數，<br />連續 7 天登入可以獲得 50 點加成！
@@ -21,10 +32,6 @@ export default async function DoYouKnow() {
   ];
 
   const randomKnow = knowsList[Math.floor(Math.random() * knowsList.length)];
-  return (
-    <div className="flex flex-col justify-center gap-2 text-center">
-      <div className="text-sm text-gray-500">你知道嗎？</div>
-      <div className="font-normal">{randomKnow}</div>
-    </div>
-  );
+
+  return randomKnow;
 }

app/login/_components/status/action.ts

@@ -1,21 +1,21 @@
 "use server";
 
 import buildUri from "@/lib/build-uri";
+import { unstable_cacheLife as cacheLife } from "next/cache";
 
 export async function getUpstreamLatency(): Promise<number> {
+  "use cache";
+  cacheLife("minutes");
+
   try {
-    const start = Date.now();
+    const start = performance.now();
 
-    const response = await fetch(buildUri("/"), {
-      next: {
-        revalidate: 120, // update latency every 2 minutes
-      },
-    });
+    const response = await fetch(buildUri("/"));
     if (!response.ok) {
       return -1;
     }
 
-    return Date.now() - start;
+    return Math.round(performance.now() - start);
   } catch (error) {
     console.error("Error getting upstream status:", error);
     return -1;