Upgrade Next.js to 14.1.0

src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx

@@ -9,6 +9,7 @@ import {
 import { expenseFormSchema } from '@/lib/schemas'
 import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
+import { Suspense } from 'react'
 
 export const metadata: Metadata = {
   title: 'Edit expense',
@@ -39,12 +40,14 @@ export default async function EditExpensePage({
   }
 
   return (
-    <ExpenseForm
-      group={group}
-      expense={expense}
-      categories={categories}
-      onSubmit={updateExpenseAction}
-      onDelete={deleteExpenseAction}
-    />
+    <Suspense>
+      <ExpenseForm
+        group={group}
+        expense={expense}
+        categories={categories}
+        onSubmit={updateExpenseAction}
+        onDelete={deleteExpenseAction}
+      />
+    </Suspense>
   )
 }

src/app/groups/[groupId]/expenses/create/page.tsx

@@ -3,6 +3,7 @@ import { createExpense, getCategories, getGroup } from '@/lib/api'
 import { expenseFormSchema } from '@/lib/schemas'
 import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
+import { Suspense } from 'react'
 
 export const metadata: Metadata = {
   title: 'Create expense',
@@ -25,10 +26,12 @@ export default async function ExpensePage({
   }
 
   return (
-    <ExpenseForm
-      group={group}
-      categories={categories}
-      onSubmit={createExpenseAction}
-    />
+    <Suspense>
+      <ExpenseForm
+        group={group}
+        categories={categories}
+        onSubmit={createExpenseAction}
+      />
+    </Suspense>
   )
 }

src/app/groups/[groupId]/expenses/export/json/route.ts

@@ -6,7 +6,6 @@ export async function GET(
   req: Request,
   { params: { groupId } }: { params: { groupId: string } },
 ) {
-  console.log({ groupId })
   const prisma = await getPrisma()
   const group = await prisma.group.findUnique({
     where: { id: groupId },

src/app/groups/[groupId]/layout.tsx

@@ -5,7 +5,7 @@ import { getGroup } from '@/lib/api'
 import { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, Suspense } from 'react'
 
 type Props = {
   params: {
@@ -41,7 +41,9 @@ export default async function GroupLayout({
         </h1>
 
         <div className="flex gap-2 justify-between">
-          <GroupTabs groupId={groupId} />
+          <Suspense>
+            <GroupTabs groupId={groupId} />
+          </Suspense>
           <ShareButton group={group} />
         </div>
       </div>

src/app/groups/layout.tsx

@@ -1,11 +1,11 @@
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, Suspense } from 'react'
 
 export default function GroupsLayout({ children }: PropsWithChildren<{}>) {
   return (
-    <>
+    <Suspense>
       <main className="flex-1 max-w-screen-md w-full mx-auto px-4 py-6 flex flex-col gap-6">
         {children}
       </main>
-    </>
+    </Suspense>
   )
 }