feat: upgrade to nextjs 15

package.json

@@ -7,7 +7,7 @@
     "build": "next build",
     "db:push": "drizzle-kit push",
     "db:studio": "drizzle-kit studio",
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "lint": "biome lint",
     "start": "next start",
     "email": "dotenv \"email dev --dir src/emails --port 3500\"",
@@ -64,15 +64,15 @@
     "geist": "^1.3.1",
     "jsbarcode": "^3.11.6",
     "lucide-react": "^0.460.0",
-    "next": "^14.2.18",
+    "next": "15.0.3",
     "next-auth": "^4.24.10",
     "next-themes": "^0.4.3",
     "papaparse": "^5.4.1",
     "postgres": "^3.4.5",
     "posthog-js": "^1.187.2",
-    "react": "18.3.1",
+    "react": "19.0.0-rc-66855b96-20241106",
     "react-day-picker": "^8.10.1",
-    "react-dom": "18.3.1",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
     "react-dropzone": "^14.3.5",
     "react-email": "3.0.2",
     "react-hook-form": "^7.53.2",
@@ -92,8 +92,8 @@
     "@types/crypto-js": "^4.2.2",
     "@types/node": "^22.9.1",
     "@types/papaparse": "^5.3.15",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "@types/uuid": "^10.0.0",
     "autoprefixer": "^10.4.20",
     "dotenv-cli": "^7.4.4",
@@ -108,5 +108,11 @@
   "ct3aMetadata": {
     "initVersion": "7.24.2"
   },
-  "packageManager": "pnpm@9.14.2"
+  "packageManager": "pnpm@9.14.2",
+  "pnpm": {
+    "overrides": {
+      "@types/react": "npm:types-react@19.0.0-rc.1",
+      "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
+    }
+  }
 }

src/app/(dashboard)/dashboard/employees/[id]/edit/page.tsx

@@ -7,12 +7,13 @@ import NotFoundStoreAlert from '~/components/stores/not-found.alert'
 import { api } from '~/trpc/server'
 
 type Props = {
-  params: {
+  params: Promise<{
     id: string
-  }
+  }>
 }
 
-export default async function EditEmployeePage({ params }: Readonly<Props>) {
+export default async function EditEmployeePage(props: Readonly<Props>) {
+  const params = await props.params
   noStore()
 
   const store = await api.store.findCurrent()

src/app/(dashboard)/dashboard/orders/[id]/page.tsx

@@ -5,14 +5,15 @@ import OrderDetail from '~/components/orders/detail'
 import { api } from '~/trpc/server'
 
 type Props = {
-  params: {
+  params: Promise<{
     id: string
-  }
+  }>
 }
 
 export const dynamic = 'force-dynamic'
 
-const OrderDetailPage = async ({ params }: Props) => {
+const OrderDetailPage = async (props: Props) => {
+  const params = await props.params
   const hasPermissions = await api.rbac.checkPermissions({
     permissions: ['order:view'],
   })

src/app/(dashboard)/dashboard/products/[id]/edit/page.tsx

@@ -6,12 +6,13 @@ import NotEnoughPermissions from '~/components/not-enough-permissions'
 import { api } from '~/trpc/server'
 
 type Props = {
-  params: {
+  params: Promise<{
     id: string
-  }
+  }>
 }
 
-export default async function EditProductPage({ params }: Readonly<Props>) {
+export default async function EditProductPage(props: Readonly<Props>) {
+  const params = await props.params
   noStore()
 
   const hasPermissions = await api.rbac.checkPermissions({

src/app/(dashboard)/dashboard/products/[id]/page.tsx

@@ -9,14 +9,15 @@ import { Skeleton } from '~/components/ui/skeleton'
 import { api } from '~/trpc/server'
 
 type Props = {
-  params: {
+  params: Promise<{
     id: string
-  }
+  }>
 }
 
 export const dynamic = 'force-dynamic'
 
-const ProductDetailPage = async ({ params }: Props) => {
+const ProductDetailPage = async (props: Props) => {
+  const params = await props.params
   const hasPermissions = await api.rbac.checkPermissions({
     permissions: ['product:view'],
   })

src/app/(dashboard)/dashboard/report/page.tsx

@@ -26,10 +26,11 @@ import NotFoundStoreAlert from '~/components/stores/not-found.alert'
 import { api } from '~/trpc/server'
 
 type Props = {
-  searchParams?: { [key: string]: string | string[] | undefined }
+  searchParams?: Promise<{ [key: string]: string | string[] | undefined }>
 }
 
-export default async function ReportPage({ searchParams }: Readonly<Props>) {
+export default async function ReportPage(props: Readonly<Props>) {
+  const searchParams = await props.searchParams
   const store = await api.store.findCurrent()
 
   if (!store) {

src/app/(dashboard)/dashboard/sales/[code]/page.tsx

@@ -5,12 +5,13 @@ import { SaleDetail } from '~/components/sale-detail'
 import { api } from '~/trpc/server'
 
 type Props = {
-  params: {
+  params: Promise<{
     code: string
-  }
+  }>
 }
 
-const SaleDetailPage = async ({ params }: Props) => {
+const SaleDetailPage = async (props: Props) => {
+  const params = await props.params
   const hasPermissions = await api.rbac.checkPermissions({
     permissions: ['sale:view'],
   })

src/app/(dashboard)/invite/[token]/page.tsx

@@ -8,11 +8,12 @@ import { getServerAuthSession } from '~/server/auth'
 import { api } from '~/trpc/server'
 
 type Props = {
-  params: {
+  params: Promise<{
     token: string
-  }
+  }>
 }
-export default async function StoreInvitationPage({ params }: Props) {
+export default async function StoreInvitationPage(props: Props) {
+  const params = await props.params
   const session = await getServerAuthSession()
 
   if (!session) {

src/app/(dashboard)/orders/c/[id]/page.tsx

@@ -3,12 +3,13 @@ import OrderDetail from '~/components/orders/detail'
 import { api } from '~/trpc/server'
 
 type Props = {
-  params: {
+  params: Promise<{
     id: string
-  }
+  }>
 }
 
-export default async function OrderDetailPage({ params }: Readonly<Props>) {
+export default async function OrderDetailPage(props: Readonly<Props>) {
+  const params = await props.params
   const order = await api.order.findPublic({ id: params.id })
 
   if (!order) {

src/app/(dashboard)/sales/c/[code]/page.tsx

@@ -3,12 +3,13 @@ import { SaleDetail } from '~/components/sale-detail'
 import { api } from '~/trpc/server'
 
 type Props = {
-  params: {
+  params: Promise<{
     code: string
-  }
+  }>
 }
 
-const CustomerSaleDetailPage = async ({ params }: Props) => {
+const CustomerSaleDetailPage = async (props: Props) => {
+  const params = await props.params
   const sale = await api.sale.findPublic({ code: params.code })
 
   if (!sale) {

src/trpc/server.ts

@@ -1,6 +1,6 @@
 import 'server-only'
 
-import { headers } from 'next/headers'
+import { headers, type UnsafeUnwrappedHeaders } from 'next/headers'
 import { cache } from 'react'
 
 import { createCaller } from '~/server/api/root'
@@ -11,7 +11,7 @@ import { createTRPCContext } from '~/server/api/trpc'
  * handling a tRPC call from a React Server Component.
  */
 const createContext = cache(() => {
-  const heads = new Headers(headers())
+  const heads = new Headers(headers() as unknown as UnsafeUnwrappedHeaders)
   heads.set('x-trpc-source', 'rsc')
 
   return createTRPCContext({