upgrade to next.js 16 (#1334)

app/(auth)/login/page.tsx

@@ -25,6 +25,7 @@ export default function Page() {
 
   const { update: updateSession } = useSession();
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: router and updateSession are stable refs
   useEffect(() => {
     if (state.status === "failed") {
       toast({
@@ -41,7 +42,6 @@ export default function Page() {
       updateSession();
       router.refresh();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.status]);
 
   const handleSubmit = (formData: FormData) => {

app/(auth)/register/page.tsx

@@ -24,6 +24,7 @@ export default function Page() {
 
   const { update: updateSession } = useSession();
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: router and updateSession are stable refs
   useEffect(() => {
     if (state.status === "user_exists") {
       toast({ type: "error", description: "Account already exists!" });
@@ -41,7 +42,6 @@ export default function Page() {
       updateSession();
       router.refresh();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.status]);
 
   const handleSubmit = (formData: FormData) => {

app/(chat)/chat/[id]/page.tsx

@@ -1,5 +1,6 @@
 import { cookies } from "next/headers";
 import { notFound, redirect } from "next/navigation";
+import { Suspense } from "react";
 
 import { auth } from "@/app/(auth)/auth";
 import { Chat } from "@/components/chat";
@@ -8,9 +9,16 @@ import { DEFAULT_CHAT_MODEL } from "@/lib/ai/models";
 import { getChatById, getMessagesByChatId } from "@/lib/db/queries";
 import { convertToUIMessages } from "@/lib/utils";
 
-export default async function Page(props: { params: Promise<{ id: string }> }) {
-  const params = await props.params;
-  const { id } = params;
+export default function Page(props: { params: Promise<{ id: string }> }) {
+  return (
+    <Suspense fallback={<div className="flex h-dvh" />}>
+      <ChatPage params={props.params} />
+    </Suspense>
+  );
+}
+
+async function ChatPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
   const chat = await getChatById({ id });
 
   if (!chat) {

app/(chat)/layout.tsx

@@ -1,20 +1,12 @@
 import { cookies } from "next/headers";
 import Script from "next/script";
+import { Suspense } from "react";
 import { AppSidebar } from "@/components/app-sidebar";
 import { DataStreamProvider } from "@/components/data-stream-provider";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { auth } from "../(auth)/auth";
 
-export const experimental_ppr = true;
-
-export default async function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const [session, cookieStore] = await Promise.all([auth(), cookies()]);
-  const isCollapsed = cookieStore.get("sidebar_state")?.value !== "true";
-
+export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Script
@@ -22,11 +14,22 @@ export default async function Layout({
         strategy="beforeInteractive"
       />
       <DataStreamProvider>
-        <SidebarProvider defaultOpen={!isCollapsed}>
-          <AppSidebar user={session?.user} />
-          <SidebarInset>{children}</SidebarInset>
-        </SidebarProvider>
+        <Suspense fallback={<div className="flex h-dvh" />}>
+          <SidebarWrapper>{children}</SidebarWrapper>
+        </Suspense>
       </DataStreamProvider>
     </>
   );
 }
+
+async function SidebarWrapper({ children }: { children: React.ReactNode }) {
+  const [session, cookieStore] = await Promise.all([auth(), cookies()]);
+  const isCollapsed = cookieStore.get("sidebar_state")?.value !== "true";
+
+  return (
+    <SidebarProvider defaultOpen={!isCollapsed}>
+      <AppSidebar user={session?.user} />
+      <SidebarInset>{children}</SidebarInset>
+    </SidebarProvider>
+  );
+}

app/(chat)/page.tsx

@@ -1,12 +1,21 @@
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
+import { Suspense } from "react";
 import { Chat } from "@/components/chat";
 import { DataStreamHandler } from "@/components/data-stream-handler";
 import { DEFAULT_CHAT_MODEL } from "@/lib/ai/models";
 import { generateUUID } from "@/lib/utils";
 import { auth } from "../(auth)/auth";
 
-export default async function Page() {
+export default function Page() {
+  return (
+    <Suspense fallback={<div className="flex h-dvh" />}>
+      <NewChatPage />
+    </Suspense>
+  );
+}
+
+async function NewChatPage() {
   const session = await auth();
 
   if (!session) {