Merge pull request #24 from database-playground/next-16

chore: upgrade to Next.js v16

Author: pan93412

app/(admin)/(user-management)/users/_components/update-form.tsx

@@ -6,7 +6,7 @@ import { UpdateFormBody } from "@/components/update-modal/form-body";
 import type { UpdateFormBaseProps } from "@/components/update-modal/types";
 import { zodResolver } from "@hookform/resolvers/zod";
 import React from "react";
-import { useForm } from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
 import { z } from "zod";
 
 export const formSchema = z.object({
@@ -39,6 +39,9 @@ export function UpdateUserForm({
     defaultValues,
   });
 
+  const avatar = useWatch({ control: form.control, name: "avatar" });
+  const name = useWatch({ control: form.control, name: "name" });
+
   const handleSubmit = (data: z.infer<typeof formSchema>) => {
     onSubmit({
       name: data.name,
@@ -85,8 +88,8 @@ export function UpdateUserForm({
         />
 
         <Avatar>
-          <AvatarImage src={form.watch("avatar")} />
-          <AvatarFallback>{form.watch("name")}</AvatarFallback>
+          <AvatarImage src={avatar} />
+          <AvatarFallback>{name}</AvatarFallback>
         </Avatar>
       </div>
 

app/(admin)/layout.tsx

@@ -2,32 +2,34 @@ import { AppSidebar } from "@/components/app-sidebar";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 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 AdminLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <ProtectedRoute>
-      <AuthorizedApolloWrapper>
-        <SidebarProvider
-          style={{
-            "--sidebar-width": "calc(var(--spacing) * 72)",
-            "--header-height": "calc(var(--spacing) * 12)",
-          } as React.CSSProperties}
-        >
-          <AppSidebar variant="inset" />
-          <SidebarInset>
-            <ViewTransition>
-              <div suppressHydrationWarning>
-                {children}
-              </div>
-            </ViewTransition>
-          </SidebarInset>
-        </SidebarProvider>
-      </AuthorizedApolloWrapper>
-    </ProtectedRoute>
+    <Suspense>
+      <ProtectedRoute>
+        <AuthorizedApolloWrapper>
+          <SidebarProvider
+            style={{
+              "--sidebar-width": "calc(var(--spacing) * 72)",
+              "--header-height": "calc(var(--spacing) * 12)",
+            } as React.CSSProperties}
+          >
+            <AppSidebar variant="inset" />
+            <SidebarInset>
+              <ViewTransition>
+                <div suppressHydrationWarning>
+                  {children}
+                </div>
+              </ViewTransition>
+            </SidebarInset>
+          </SidebarProvider>
+        </AuthorizedApolloWrapper>
+      </ProtectedRoute>
+    </Suspense>
   );
 }

app/(admin)/me/_components/form.tsx

@@ -9,7 +9,7 @@ import { useUser } from "@/providers/use-user";
 import { useMutation } from "@apollo/client/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect } from "react";
-import { useForm } from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import { ME_UPDATE_MUTATION } from "./mutation";
@@ -30,6 +30,8 @@ export function MeForm() {
     },
   });
 
+  const avatar = useWatch({ control: form.control, name: "avatar" });
+
   useEffect(() => {
     if (!form.formState.isDirty) return;
     const message = "您有尚未儲存的更動。確定要關閉而不儲存嗎？您的更動將會遺失。";
@@ -47,8 +49,6 @@ export function MeForm() {
     };
   }, [form.formState.isDirty]);
 
-  const avatar = form.watch("avatar");
-
   const [updateMe] = useMutation(ME_UPDATE_MUTATION, {
     refetchQueries: [BASIC_USER_INFO_QUERY],
     onError: (error) => {

components/data-table/general.tsx

@@ -12,6 +12,8 @@ export function GeneralDataTable<TData, TValue>({
   columns,
   data,
 }: GeneralDataTableProps<TData, TValue>) {
+  "use no memo";
+
   const table = useReactTable({
     data,
     columns,

components/ui/sidebar.tsx

@@ -723,11 +723,6 @@ function SidebarMenuSkeleton({
 }: React.ComponentProps<"div"> & {
   showIcon?: boolean;
 }) {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, []);
-
   return (
     <div
       data-slot="sidebar-menu-skeleton"
@@ -745,7 +740,7 @@ function SidebarMenuSkeleton({
         className="h-4 max-w-(--skeleton-width) flex-1"
         data-sidebar="menu-skeleton-text"
         style={{
-          "--skeleton-width": width,
+          "--skeleton-width": "90%",
         } as React.CSSProperties}
       />
     </div>

next.config.ts

@@ -9,8 +9,9 @@ const nextConfig: NextConfig = {
     swcPlugins: [
       ["@swc-contrib/plugin-graphql-codegen-client-preset", { artifactDirectory: "./gql", gqlTagName: "graphql" }],
     ],
-    ppr: "incremental",
+    cacheComponents: true,
     authInterrupts: true,
+    turbopackFileSystemCacheForDev: true,
   },
 };
 

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev --experimental-https",
     "build": "next build",
     "start": "next start",
     "lint": "eslint .",
@@ -17,7 +17,7 @@
     "@apollo/client": "4.0.7",
     "@apollo/client-integration-nextjs": "^0.13.2",
     "@bprogress/next": "^3.2.12",
-    "@graphql-codegen/client-preset": "^5.0.3",
+    "@graphql-codegen/client-preset": "^5.1.0",
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.10",
@@ -37,18 +37,18 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "graphql": "^16.11.0",
-    "lucide-react": "^0.544.0",
-    "next": "15.6.0-canary.45",
+    "lucide-react": "^0.545.0",
+    "next": "16.0.0-canary.2",
     "next-themes": "^0.4.6",
-    "react": "19.3.0-canary-4fdf7cf2-20251003",
-    "react-dom": "19.3.0-canary-4fdf7cf2-20251003",
-    "react-hook-form": "^7.64.0",
+    "react": "19.3.0-canary-ead92181-20251010",
+    "react-dom": "19.3.0-canary-ead92181-20251010",
+    "react-hook-form": "^7.65.0",
     "react-remark": "^2.1.0",
     "remark": "^15.0.1",
     "remark-html": "^16.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
-    "zod": "^4.1.11"
+    "zod": "^4.1.12"
   },
   "devDependencies": {
     "@0no-co/graphqlsp": "^1.15.0",
@@ -58,13 +58,13 @@
     "@graphql-typed-document-node/core": "^3.2.0",
     "@parcel/watcher": "^2.5.1",
     "@tailwindcss/postcss": "^4.1.14",
-    "@types/node": "^24.7.0",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
-    "@typescript-eslint/parser": "^8.45.0",
+    "@types/node": "^24.7.2",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
+    "@typescript-eslint/parser": "^8.46.0",
     "dprint": "^0.50.2",
     "eslint": "^9.37.0",
-    "eslint-config-next": "15.6.0-canary.45",
+    "eslint-config-next": "16.0.0-canary.2",
     "eslint-plugin-better-tailwindcss": "^3.7.9",
     "tailwindcss": "^4.1.14",
     "tw-animate-css": "^1.4.0",