upgrade to next 15 (#151)

Author: KMKoushik

apps/marketing/package.json

@@ -9,27 +9,27 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@heroicons/react": "^2.1.3",
+    "@heroicons/react": "^2.2.0",
     "@unsend/email-editor": "workspace:*",
     "@unsend/ui": "workspace:*",
-    "date-fns": "^3.6.0",
-    "framer-motion": "^11.0.24",
-    "lucide-react": "^0.359.0",
-    "next": "14.2.25",
-    "react": "^18",
-    "react-dom": "^18"
+    "date-fns": "^4.1.0",
+    "framer-motion": "^12.9.2",
+    "lucide-react": "^0.503.0",
+    "next": "15.3.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/node": "^22.15.2",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "@unsend/eslint-config": "workspace:*",
     "@unsend/tailwind-config": "workspace:*",
-    "autoprefixer": "^10.0.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.1.4",
-    "postcss": "^8",
-    "tailwindcss": "^3.3.0",
-    "typescript": "^5"
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.25.1",
+    "eslint-config-next": "15.3.1",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.8.3"
   }
 }

apps/smtp-server/package.json

@@ -12,18 +12,17 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@types/dotenv": "^8.2.0",
-    "@types/mailparser": "^3.4.4",
+    "@types/mailparser": "^3.4.5",
     "@types/smtp-server": "^3.5.10",
-    "dotenv": "^16.4.5",
-    "mailparser": "^3.7.1",
-    "nodemailer": "^6.9.14",
-    "smtp-server": "^3.13.4"
+    "dotenv": "^16.5.0",
+    "mailparser": "^3.7.2",
+    "nodemailer": "^6.10.1",
+    "smtp-server": "^3.13.6"
   },
   "devDependencies": {
-    "@types/node": "^22.1.0",
-    "@types/nodemailer": "^6.4.15",
-    "tsup": "^8.0.2",
-    "typescript": "^5.5.4"
+    "@types/node": "^22.15.2",
+    "@types/nodemailer": "^6.4.17",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.3"
   }
 }

apps/web/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/web/next.config.js

@@ -9,7 +9,6 @@ const config = {
   output: process.env.DOCKER_OUTPUT ? "standalone" : undefined,
   experimental: {
     instrumentationHook: true,
-    esmExternals: "loose",
     serverComponentsExternalPackages: ["bullmq"],
   },
   images: {

apps/web/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev -p 3000",
+    "dev": "next dev -p 3000 --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "eslint . --max-warnings 0",
@@ -17,74 +17,77 @@
     "db:migrate-reset": "prisma migrate reset"
   },
   "dependencies": {
-    "@auth/prisma-adapter": "^1.4.0",
-    "@aws-sdk/client-s3": "^3.637.0",
-    "@aws-sdk/client-sesv2": "^3.535.0",
-    "@aws-sdk/client-sns": "^3.540.0",
-    "@aws-sdk/s3-request-presigner": "^3.637.0",
-    "@hono/swagger-ui": "^0.2.1",
-    "@hono/zod-openapi": "^0.10.0",
-    "@hookform/resolvers": "^3.3.4",
+    "@auth/prisma-adapter": "^2.9.0",
+    "@aws-sdk/client-s3": "^3.797.0",
+    "@aws-sdk/client-sesv2": "^3.797.0",
+    "@aws-sdk/client-sns": "^3.797.0",
+    "@aws-sdk/s3-request-presigner": "^3.797.0",
+    "@hono/swagger-ui": "^0.5.1",
+    "@hono/zod-openapi": "^0.19.5",
+    "@hookform/resolvers": "^5.0.1",
     "@isaacs/ttlcache": "^1.4.1",
-    "@prisma/client": "^6.3.1",
-    "@t3-oss/env-nextjs": "^0.9.2",
-    "@tanstack/react-query": "^5.25.0",
-    "@trpc/client": "next",
-    "@trpc/next": "next",
-    "@trpc/react-query": "next",
-    "@trpc/server": "next",
+    "@prisma/client": "^6.6.0",
+    "@t3-oss/env-nextjs": "^0.13.0",
+    "@tanstack/react-query": "^5.74.4",
+    "@trpc/client": "^11.1.1",
+    "@trpc/next": "^11.1.1",
+    "@trpc/react-query": "^11.1.1",
+    "@trpc/server": "^11.1.1",
     "@unsend/email-editor": "workspace:*",
     "@unsend/ui": "workspace:*",
-    "bullmq": "^5.41.0",
-    "chrono-node": "^2.7.6",
-    "date-fns": "^3.6.0",
-    "emoji-picker-react": "^4.12.0",
-    "framer-motion": "^11.0.24",
-    "hono": "^4.2.2",
+    "bullmq": "^5.51.1",
+    "chrono-node": "^2.8.0",
+    "date-fns": "^4.1.0",
+    "emoji-picker-react": "^4.12.2",
+    "framer-motion": "^12.9.2",
+    "hono": "^4.7.7",
     "html-to-text": "^9.0.5",
-    "ioredis": "^5.4.1",
-    "lucide-react": "^0.359.0",
-    "mime-types": "^2.1.35",
-    "nanoid": "^5.0.7",
-    "next": "^14.2.25",
-    "next-auth": "^4.24.6",
-    "pnpm": "^8.15.5",
-    "prisma": "^6.3.1",
-    "query-string": "^9.0.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-hook-form": "^7.51.3",
-    "recharts": "^2.12.5",
+    "ioredis": "^5.6.1",
+    "lucide-react": "^0.503.0",
+    "mime-types": "^3.0.1",
+    "nanoid": "^5.1.5",
+    "next": "^15.3.1",
+    "next-auth": "^4.24.11",
+    "pnpm": "^10.9.0",
+    "prisma": "^6.6.0",
+    "query-string": "^9.1.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-hook-form": "^7.56.1",
+    "recharts": "^2.15.3",
     "server-only": "^0.0.1",
-    "stripe": "^17.6.0",
-    "superjson": "^2.2.1",
-    "tldts": "^6.1.16",
-    "ua-parser-js": "^1.0.38",
+    "stripe": "^18.0.0",
+    "superjson": "^2.2.2",
+    "tldts": "^7.0.4",
+    "ua-parser-js": "^2.0.3",
     "unsend": "workspace:*",
-    "use-debounce": "^10.0.2",
-    "zod": "^3.22.4"
+    "use-debounce": "^10.0.4",
+    "zod": "^3.24.3"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^14.2.2",
-    "@types/eslint": "^8.56.2",
+    "@next/eslint-plugin-next": "^15.3.1",
+    "@types/eslint": "^9.6.1",
     "@types/html-to-text": "^9.0.4",
     "@types/mime-types": "^2.1.4",
-    "@types/node": "^20.11.20",
-    "@types/react": "^18.2.57",
-    "@types/react-dom": "^18.2.19",
+    "@types/node": "^22.15.2",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "@types/ua-parser-js": "^0.7.39",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
+    "@typescript-eslint/eslint-plugin": "^8.31.0",
+    "@typescript-eslint/parser": "^8.31.0",
     "@unsend/eslint-config": "workspace:*",
     "@unsend/tailwind-config": "workspace:*",
     "@unsend/typescript-config": "workspace:*",
-    "eslint": "^8.57.0",
-    "eslint-config-next": "^14.1.3",
-    "postcss": "^8.4.34",
-    "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.11",
+    "eslint": "^9.25.1",
+    "eslint-config-next": "^15.3.1",
+    "postcss": "^8.5.3",
+    "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.4.2"
+    "typescript": "^5.8.3"
+  },
+  "overrides": {
+    "react-is": "^19.0.0-rc-69d4b800-20241021"
   },
   "ct3aMetadata": {
     "initVersion": "7.30.0"

apps/web/src/app/(dashboard)/campaigns/[campaignId]/edit/page.tsx

@@ -5,7 +5,7 @@ import { Spinner } from "@unsend/ui/src/spinner";
 import { Button } from "@unsend/ui/src/button";
 import { Input } from "@unsend/ui/src/input";
 import { Editor } from "@unsend/email-editor";
-import { useState } from "react";
+import { use, useState } from "react";
 import { Campaign } from "@prisma/client";
 import {
   Select,
@@ -51,16 +51,18 @@ const IMAGE_SIZE_LIMIT = 10 * 1024 * 1024;
 export default function EditCampaignPage({
   params,
 }: {
-  params: { campaignId: string };
+  params: Promise<{ campaignId: string }>;
 }) {
+  const { campaignId } = use(params);
+
   const {
     data: campaign,
     isLoading,
     error,
   } = api.campaign.getCampaign.useQuery(
-    { campaignId: params.campaignId },
+    { campaignId },
     {
-      enabled: !!params.campaignId,
+      enabled: !!campaignId,
     }
   );
 

apps/web/src/app/(dashboard)/campaigns/[campaignId]/page.tsx

@@ -12,16 +12,17 @@ import Link from "next/link";
 
 import Spinner from "@unsend/ui/src/spinner";
 import { api } from "~/trpc/react";
-import { Separator } from "@unsend/ui/src/separator";
-import { ExternalLinkIcon } from "lucide-react";
+import { use } from "react";
 
 export default function CampaignDetailsPage({
   params,
 }: {
-  params: { campaignId: string };
+  params: Promise<{ campaignId: string }>;
 }) {
+  const { campaignId } = use(params);
+
   const { data: campaign, isLoading } = api.campaign.getCampaign.useQuery({
-    campaignId: params.campaignId,
+    campaignId: campaignId,
   });
 
   if (isLoading) {

apps/web/src/app/(dashboard)/contacts/[contactBookId]/page.tsx

@@ -22,16 +22,18 @@ import {
 } from "@unsend/ui/src/popover";
 import { Button } from "@unsend/ui/src/button";
 import { useTheme } from "@unsend/ui";
+import { use } from "react";
 
 export default function ContactsPage({
   params,
 }: {
-  params: { contactBookId: string };
+  params: Promise<{ contactBookId: string }>;
 }) {
+  const { contactBookId } = use(params);
   const { theme } = useTheme();
 
   const contactBookDetailQuery = api.contacts.getContactBookDetails.useQuery({
-    contactBookId: params.contactBookId,
+    contactBookId: contactBookId,
   });
 
   const utils = api.useUtils();
@@ -41,7 +43,7 @@ export default function ContactsPage({
       await utils.contacts.getContactBookDetails.cancel();
       utils.contacts.getContactBookDetails.setData(
         {
-          contactBookId: params.contactBookId,
+          contactBookId: contactBookId,
         },
         (old) => {
           if (!old) return old;
@@ -54,7 +56,7 @@ export default function ContactsPage({
     },
     onSettled: () => {
       utils.contacts.getContactBookDetails.invalidate({
-        contactBookId: params.contactBookId,
+        contactBookId: contactBookId,
       });
     },
   });
@@ -93,7 +95,7 @@ export default function ContactsPage({
                               // Handle emoji selection here
                               // You might want to update the contactBook's emoji
                               updateContactBookMutation.mutate({
-                                contactBookId: params.contactBookId,
+                                contactBookId: contactBookId,
                                 emoji: emojiObject.emoji,
                               });
                             }}
@@ -118,7 +120,7 @@ export default function ContactsPage({
           </Breadcrumb>
         </div>
         <div className="flex gap-4">
-          <AddContact contactBookId={params.contactBookId} />
+          <AddContact contactBookId={contactBookId} />
         </div>
       </div>
       <div className="mt-16">
@@ -153,7 +155,7 @@ export default function ContactsPage({
                 Contact book ID
               </div>
               <TextWithCopyButton
-                value={params.contactBookId}
+                value={contactBookId}
                 alwaysShowCopy
                 className="text-sm w-[130px] overflow-hidden text-ellipsis font-mono"
               />
@@ -194,7 +196,7 @@ export default function ContactsPage({
           </div>
         </div>
         <div className="mt-16">
-          <ContactList contactBookId={params.contactBookId} />
+          <ContactList contactBookId={contactBookId} />
         </div>
       </div>
     </div>

apps/web/src/app/(dashboard)/contacts/contact-books-list.tsx

@@ -34,6 +34,7 @@ export default function ContactBooksList() {
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 ">
         {contactBooksQuery.data?.map((contactBook) => (
           <motion.div
+            key={contactBook.id}
             whileHover={{ scale: 1.02 }}
             transition={{ type: "spring", stiffness: 200, damping: 10 }}
             whileTap={{ scale: 0.99 }}

apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx

@@ -20,7 +20,7 @@ import {
   TableRow,
 } from "@unsend/ui/src/table";
 import { TextWithCopyButton } from "@unsend/ui/src/text-with-copy";
-import React from "react";
+import React, { use } from "react";
 import { Switch } from "@unsend/ui/src/switch";
 import DeleteDomain from "./delete-domain";
 import SendTestMail from "./send-test-mail";
@@ -31,11 +31,13 @@ import { toast } from "@unsend/ui/src/toaster";
 export default function DomainItemPage({
   params,
 }: {
-  params: { domainId: string };
+  params: Promise<{ domainId: string }>;
 }) {
+  const { domainId } = use(params);
+
   const domainQuery = api.domain.getDomain.useQuery(
     {
-      id: Number(params.domainId),
+      id: Number(domainId),
     },
     {
       refetchInterval: (q) => (q?.state.data?.isVerifying ? 10000 : false),
@@ -47,7 +49,7 @@ export default function DomainItemPage({
 
   const handleVerify = () => {
     verifyQuery.mutate(
-      { id: Number(params.domainId) },
+      { id: Number(domainId) },
       {
         onSettled: () => {
           domainQuery.refetch();