Upgrade to nextjs 15

apps/web/app/(app)/automation/BulkRunRules.tsx

@@ -37,7 +37,7 @@ export function BulkRunRules() {
   const [startDate, setStartDate] = useState<Date | undefined>();
   const [endDate, setEndDate] = useState<Date | undefined>();
 
-  const abortRef = useRef<() => void>();
+  const abortRef = useRef<() => void>(undefined);
 
   return (
     <div>

apps/web/app/(app)/automation/group/[groupId]/examples/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { use } from "react";
 
 import useSWR from "swr";
 import groupBy from "lodash/groupBy";
@@ -9,11 +10,10 @@ import { LoadingContent } from "@/components/LoadingContent";
 
 export const dynamic = "force-dynamic";
 
-export default function RuleExamplesPage({
-  params,
-}: {
-  params: { groupId: string };
+export default function RuleExamplesPage(props: {
+  params: Promise<{ groupId: string }>;
 }) {
+  const params = use(props.params);
   const { data, isLoading, error } = useSWR<GroupEmailsResponse>(
     `/api/user/group/${params.groupId}/messages`,
   );

apps/web/app/(app)/automation/group/[groupId]/page.tsx

@@ -1,10 +1,14 @@
 "use client";
+import { use } from "react";
 
 import { useRouter } from "next/navigation";
 import { ViewGroup } from "@/app/(app)/automation/group/ViewGroup";
 import { Container } from "@/components/Container";
 
-export default function GroupPage({ params }: { params: { groupId: string } }) {
+export default function GroupPage(props: {
+  params: Promise<{ groupId: string }>;
+}) {
+  const params = use(props.params);
   const router = useRouter();
 
   return (

apps/web/app/(app)/automation/rule/[ruleId]/examples/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { use } from "react";
 
 import Link from "next/link";
 import useSWR from "swr";
@@ -11,11 +12,10 @@ import { LoadingContent } from "@/components/LoadingContent";
 
 export const dynamic = "force-dynamic";
 
-export default function RuleExamplesPage({
-  params,
-}: {
-  params: { ruleId: string };
+export default function RuleExamplesPage(props: {
+  params: Promise<{ ruleId: string }>;
 }) {
+  const params = use(props.params);
   const { data, isLoading, error } = useSWR<ExamplesResponse>(
     `/api/user/rules/${params.ruleId}/example`,
   );

apps/web/app/(app)/automation/rule/[ruleId]/page.tsx

@@ -4,13 +4,12 @@ import { auth } from "@/app/api/auth/[...nextauth]/auth";
 import { RuleForm } from "@/app/(app)/automation/RuleForm";
 import { TopSection } from "@/components/TopSection";
 
-export default async function RulePage({
-  params,
-  searchParams,
-}: {
-  params: { ruleId: string };
-  searchParams: { new: string };
+export default async function RulePage(props: {
+  params: Promise<{ ruleId: string }>;
+  searchParams: Promise<{ new: string }>;
 }) {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
   const session = await auth();
   if (!session?.user) redirect("/login");
 

apps/web/app/(app)/automation/rule/create/page.tsx

@@ -2,11 +2,10 @@ import { RuleForm } from "@/app/(app)/automation/RuleForm";
 import { examples } from "@/app/(app)/automation/create/examples";
 import { RuleType } from "@prisma/client";
 
-export default function CreateRulePage({
-  searchParams,
-}: {
-  searchParams: { example?: string; groupId?: string; tab?: RuleType };
+export default async function CreateRulePage(props: {
+  searchParams: Promise<{ example?: string; groupId?: string; tab?: RuleType }>;
 }) {
+  const searchParams = await props.searchParams;
   const rule =
     searchParams.example &&
     examples[Number.parseInt(searchParams.example)].rule;

apps/web/app/(app)/compose/ComposeEmailFormLazy.tsx

@@ -5,7 +5,10 @@ import { Loading } from "@/components/Loading";
 
 // keep bundle size down by importing dynamically on use
 export const ComposeEmailFormLazy = dynamic(
-  () => import("./ComposeEmailForm").then((mod) => mod.ComposeEmailForm),
+  () =>
+    import("./ComposeEmailForm").then((mod) => ({
+      default: mod.ComposeEmailForm,
+    })),
   {
     loading: () => <Loading />,
   },

apps/web/app/(app)/license/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback } from "react";
+import { useCallback, use } from "react";
 import { type SubmitHandler, useForm } from "react-hook-form";
 import { Button } from "@/components/Button";
 import { Input } from "@/components/Input";
@@ -12,11 +12,10 @@ import { useUser } from "@/hooks/useUser";
 
 type Inputs = { licenseKey: string };
 
-export default function LicensePage({
-  searchParams,
-}: {
-  searchParams: { "license-key"?: string };
+export default function LicensePage(props: {
+  searchParams: Promise<{ "license-key"?: string }>;
 }) {
+  const searchParams = use(props.searchParams);
   const licenseKey = searchParams["license-key"];
 
   const { data } = useUser();

apps/web/app/(app)/mail/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, use } from "react";
 import useSWRInfinite from "swr/infinite";
 import { useSetAtom } from "jotai";
 import { List } from "@/components/email-list/EmailList";
@@ -12,11 +12,10 @@ import { BetaBanner } from "@/app/(app)/mail/BetaBanner";
 import { ClientOnly } from "@/components/ClientOnly";
 import { PermissionsCheck } from "@/app/(app)/PermissionsCheck";
 
-export default function Mail({
-  searchParams,
-}: {
-  searchParams: { type?: string };
+export default function Mail(props: {
+  searchParams: Promise<{ type?: string }>;
 }) {
+  const searchParams = use(props.searchParams);
   const query: ThreadsQuery = searchParams.type
     ? { type: searchParams.type }
     : {};

apps/web/app/(app)/onboarding/page.tsx

@@ -9,11 +9,10 @@ import { LoadStats } from "@/providers/StatLoaderProvider";
 
 export const maxDuration = 120;
 
-export default function OnboardingPage({
-  searchParams,
-}: {
-  searchParams: { step?: string };
+export default async function OnboardingPage(props: {
+  searchParams: Promise<{ step?: string }>;
 }) {
+  const searchParams = await props.searchParams;
   const step = searchParams.step
     ? Number.parseInt(searchParams.step)
     : undefined;

apps/web/app/(app)/simple/page.tsx

@@ -15,11 +15,13 @@ import { getMessage } from "@/utils/gmail/message";
 
 export const dynamic = "force-dynamic";
 
-export default async function SimplePage({
-  searchParams: { pageToken, type = "IMPORTANT" },
-}: {
-  searchParams: { pageToken?: string; type?: string };
+export default async function SimplePage(props: {
+  searchParams: Promise<{ pageToken?: string; type?: string }>;
 }) {
+  const searchParams = await props.searchParams;
+
+  const { pageToken, type = "IMPORTANT" } = searchParams;
+
   const session = await auth();
   const email = session?.user.email;
   if (!email) throw new Error("Not authenticated");

apps/web/app/(landing)/login/page.tsx

@@ -14,11 +14,10 @@ export const metadata: Metadata = {
   alternates: { canonical: "/login" },
 };
 
-export default async function AuthenticationPage({
-  searchParams,
-}: {
-  searchParams?: Record<string, string>;
+export default async function AuthenticationPage(props: {
+  searchParams?: Promise<Record<string, string>>;
 }) {
+  const searchParams = await props.searchParams;
   const session = await auth();
   if (session?.user.email && !searchParams?.error) {
     if (searchParams?.next) {

apps/web/app/(landing)/welcome/page.tsx

@@ -19,11 +19,10 @@ export const metadata: Metadata = {
   alternates: { canonical: "/welcome" },
 };
 
-export default async function WelcomePage({
-  searchParams,
-}: {
-  searchParams: { question?: string; force?: boolean };
+export default async function WelcomePage(props: {
+  searchParams: Promise<{ question?: string; force?: boolean }>;
 }) {
+  const searchParams = await props.searchParams;
   const session = await auth();
 
   if (!session?.user.email) redirect("/login");

apps/web/app/(landing)/welcome/utms.tsx

@@ -2,7 +2,7 @@ import { cookies } from "next/headers";
 import prisma from "@/utils/prisma";
 
 async function storeUtms(userId: string) {
-  const cookieStore = cookies();
+  const cookieStore = await cookies();
   const utmCampaign = cookieStore.get("utm_campaign");
   const utmMedium = cookieStore.get("utm_medium");
   const utmSource = cookieStore.get("utm_source");

apps/web/app/api/auth/[...nextauth]/route.ts

@@ -1,36 +1 @@
 export { GET, POST } from "./auth";
-// export const runtime = "edge" // optional
-
-// This code was used in the past to reask for consent when signing in with Google.
-// This doesn't happen often, but I'm keeping it here for now just in case we decide to put it back.
-// This code worked with Next Auth v4. We've since moved to v5.
-
-// import NextAuth from "next-auth";
-// import { authOptions, getAuthOptions } from "@/utils/auth";
-
-// export const dynamic = "force-dynamic";
-
-// // https://next-auth.js.org/configuration/initialization#advanced-initialization
-// async function handler(
-//   request: Request,
-//   context: { params?: { nextauth?: string[] } }
-// ) {
-//   let authOpts = authOptions;
-
-//   if (
-//     request.method === "POST" &&
-//     context.params?.nextauth?.[0] === "signin" &&
-//     context.params.nextauth[1] === "google"
-//   ) {
-//     const clonedRequest = request.clone();
-//     const formData = await clonedRequest.formData();
-//     const requestConsent = formData.get("consent") === "true";
-
-//     authOpts = getAuthOptions({ consent: requestConsent });
-//   }
-
-//   // can remove `as any` once this is fixed: https://github.com/nextauthjs/next-auth/issues/8120
-//   return await NextAuth(request as any, context as any, authOpts);
-// }
-
-// export { handler as GET, handler as POST };

apps/web/app/api/user/complete-registration/route.ts

@@ -1,5 +1,5 @@
 import { type NextRequest, NextResponse } from "next/server";
-import { cookies, headers } from "next/headers";
+import { cookies, headers, type UnsafeUnwrappedHeaders } from "next/headers";
 import { auth } from "@/app/api/auth/[...nextauth]/auth";
 import { withError } from "@/utils/middleware";
 import { sendCompleteRegistrationEvent } from "@/utils/fb";
@@ -14,11 +14,11 @@ export const POST = withError(async (_request: NextRequest) => {
   if (!session?.user.email)
     return NextResponse.json({ error: "Not authenticated" });
 
-  const eventSourceUrl = headers().get("referer");
-  const userAgent = headers().get("user-agent");
+  const eventSourceUrl = (await headers()).get("referer");
+  const userAgent = (await headers()).get("user-agent");
   const ip = getIp();
 
-  const c = cookies();
+  const c = await cookies();
 
   const fbc = c.get("_fbc")?.value;
   const fbp = c.get("_fbp")?.value;
@@ -44,13 +44,18 @@ export const POST = withError(async (_request: NextRequest) => {
 
 function getIp() {
   const FALLBACK_IP_ADDRESS = "0.0.0.0";
-  const forwardedFor = headers().get("x-forwarded-for");
+  const forwardedFor = (headers() as unknown as UnsafeUnwrappedHeaders).get(
+    "x-forwarded-for",
+  );
 
   if (forwardedFor) {
     return forwardedFor.split(",")[0] ?? FALLBACK_IP_ADDRESS;
   }
 
-  return headers().get("x-real-ip") ?? FALLBACK_IP_ADDRESS;
+  return (
+    (headers() as unknown as UnsafeUnwrappedHeaders).get("x-real-ip") ??
+    FALLBACK_IP_ADDRESS
+  );
 }
 
 async function storePosthogSignupEvent(userId: string, email: string) {

apps/web/app/api/v1/group/[groupId]/emails/route.ts

@@ -10,8 +10,9 @@ import {
 
 export async function GET(
   request: NextRequest,
-  { params }: { params: { groupId: string } },
+  props: { params: Promise<{ groupId: string }> },
 ) {
+  const params = await props.params;
   const { groupId } = params;
   const { searchParams } = new URL(request.url);
   const queryResult = groupEmailsQuerySchema.safeParse(

apps/web/app/blog/post/[slug]/page.tsx

@@ -15,13 +15,14 @@ export async function generateStaticParams() {
 }
 
 type Props = {
-  params: { slug: string };
+  params: Promise<{ slug: string }>;
 };
 
 export async function generateMetadata(
-  { params }: Props,
+  props: Props,
   parent: ResolvingMetadata,
 ) {
+  const params = await props.params;
   const post = await sanityFetch<PostType | undefined>({
     query: postQuery,
     params,
@@ -62,7 +63,8 @@ export async function generateMetadata(
 
 // Multiple versions of this page will be statically generated
 // using the `params` returned by `generateStaticParams`
-export default async function Page({ params }: Props) {
+export default async function Page(props: Props) {
+  const params = await props.params;
   const post = await sanityFetch<PostType>({ query: postQuery, params });
 
   return <Post post={post} />;

apps/web/next.config.mjs → apps/web/next.config.ts

@@ -1,25 +1,16 @@
-import { fileURLToPath } from "node:url";
+import type { NextConfig } from "next";
 import { withSentryConfig } from "@sentry/nextjs";
 import { withAxiom } from "next-axiom";
 import nextMdx from "@next/mdx";
-import createJiti from "jiti";
 import withSerwistInit from "@serwist/next";
-
-const jiti = createJiti(fileURLToPath(import.meta.url));
-
 // Import env here to validate during build. Using jiti we can import .ts files :)
-jiti("./env");
+import "./env";
 
 const withMDX = nextMdx();
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+const nextConfig: NextConfig = {
   reactStrictMode: true,
-  swcMinify: true,
-  experimental: {
-    serverComponentsExternalPackages: ["@sentry/nextjs", "@sentry/node"],
-    instrumentationHook: true,
-  },
+  serverExternalPackages: ["@sentry/nextjs", "@sentry/node"],
   pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
   images: {
     remotePatterns: [