upgrade nextjs, clerk

Author: probablyangg

package-lock.json

@@ -43,7 +43,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.787.0",
     "@aws-sdk/s3-request-presigner": "^3.787.0",
-    "@clerk/nextjs": "^6.0.0",
+    "@clerk/nextjs": "^6.21.0",
     "@hookform/resolvers": "^2.9.11",
     "@prisma/client": "^5.10.2",
     "@radix-ui/react-accordion": "^1.2.11",
@@ -115,7 +115,7 @@
     "luxon": "^3.2.1",
     "mapbox-gl": "^3.11.0",
     "nanoid": "^4.0.0",
-    "next": "^14.1.1",
+    "next": "^15.3.3",
     "next-seo": "^5.15.0",
     "openai": "^4.82.0",
     "partysocket": "0.0.25",

package.json

@@ -9,7 +9,7 @@ import { getCommunityFromSubdomain } from "src/utils/getCommunityFromSubdomain";
 
 export async function POST(req: NextRequest) {
   console.log("[api] services/slack/notify");
-  const headersList = headers();
+  const headersList = await headers();
   const body = await req.json();
   const { eventId, type } = pick(body, ["eventId", "type"]);
   const host = headersList.get("host") ?? "kernel";

public/favicon-32x32.png

@@ -172,7 +172,7 @@ const sendEmailsAsync = async (
 
     // Queue Slack notification instead of sending directly
     try {
-      const headersList = headers();
+      const headersList = await headers();
       const host = headersList.get("host") ?? "kernel";
 
       // Import the queue function to avoid circular dependencies

src/app/api/services/slack/notify/route.ts

@@ -8,13 +8,14 @@ import Link from "next/link";
 import BlogBackground from "src/components/BlogBackground";
 
 interface Props {
-  params: {
+  params: Promise<{
     slug: string;
-  };
+  }>;
 }
 
-export default function BlogPost({ params }: Props) {
-  const ember = getEmberBySlug(params.slug);
+export default async function BlogPost({ params }: Props) {
+  const { slug } = await params;
+  const ember = getEmberBySlug(slug);
 
   if (!ember) {
     notFound();

src/app/api/upsert/convo/route.ts

@@ -1,17 +1,24 @@
 "use client";
 
+import React from "react";
 import Main from "src/layouts/Main";
 import useCollection from "src/hooks/useCollection";
 import { Events } from "src/components/Events";
 import TitleLoadingState from "src/components/LoadingState/Title";
 
-const Post = ({ params }: { params: { collectionId: string } }) => {
-  const collectionId = params.collectionId;
+const Post = ({ params }: { params: Promise<{ collectionId: string }> }) => {
+  const [collectionId, setCollectionId] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    params.then(({ collectionId }) => {
+      setCollectionId(collectionId);
+    });
+  }, [params]);
   const {
     isLoading: isCollectionLoading,
     isError,
     data: collection,
-  } = useCollection({ collectionId });
+  } = useCollection({ collectionId: collectionId || undefined });
 
   return (
     <Main>

src/app/blog/[slug]/page.tsx

@@ -5,18 +5,19 @@ import type { Metadata } from "next";
 import CommunityDetails from "../../../components/Community/CommunityDetails";
 
 type Props = {
-  params: { communitySubdomain: string };
+  params: Promise<{ communitySubdomain: string }>;
 };
 
 export const revalidate = 3600; // revalidate every hour
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { communitySubdomain } = await params;
   const baseUrl = process.env.NEXT_PUBLIC_APP_URL || "https://www.convo.cafe";
 
   try {
     // Fetch the community data
     const community = await prisma.community.findUnique({
-      where: { subdomain: params.communitySubdomain },
+      where: { subdomain: communitySubdomain },
       include: {
         slack: true,
         events: {
@@ -41,7 +42,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
       openGraph: {
         title: metaTitle,
         description: metaDescription,
-        url: `${baseUrl}/community/${params.communitySubdomain}`,
+        url: `${baseUrl}/community/${communitySubdomain}`,
         siteName: "Convo Cafe",
         locale: "en_US",
         type: "profile",
@@ -58,8 +59,9 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 }
 
 async function CommunityPage({ params }: Props) {
+  const { communitySubdomain } = await params;
   const community = await prisma.community.findUnique({
-    where: { subdomain: params.communitySubdomain },
+    where: { subdomain: communitySubdomain },
     include: {
       slack: true,
       events: {

src/app/collection/[collectionId]/page.tsx

@@ -15,13 +15,19 @@ import { useRouter } from "next/navigation";
 import type { ClientEventInput } from "src/types";
 import { useBetaMode } from "src/hooks/useBetaMode";
 
-const Edit = ({ params }: { params: { eventHash: string } }) => {
+const Edit = ({ params }: { params: Promise<{ eventHash: string }> }) => {
   const { push } = useRouter();
-  const { eventHash } = params;
+  const [eventHash, setEventHash] = useState<string | null>(null);
+
+  useEffect(() => {
+    params.then(({ eventHash }) => {
+      setEventHash(eventHash);
+    });
+  }, [params]);
   // Set dontFetch explicitly to true for edit pages to prevent refetching and form resets
   // Added staleTime: Infinity in useEvent hook to prevent refetching when tab regains focus
   const { data, isLoading: isEventLoading } = useEvent({
-    hash: eventHash,
+    hash: eventHash || "",
     dontFetch: true, // Ensure we don't poll for updates on edit pages
   });
   const { deleteEvent, isDeleting } = useDeleteEvent();
@@ -57,7 +63,7 @@ const Edit = ({ params }: { params: { eventHash: string } }) => {
     // Also ensure other dependencies are correct
   }, [user, data, isBetaMode, setInvalidRequest]);
 
-  if (isEventLoading || !user) {
+  if (isEventLoading || !user || !eventHash) {
     return (
       <Main>
         <div className="flex flex-col items-center justify-center">
@@ -89,6 +95,7 @@ const Edit = ({ params }: { params: { eventHash: string } }) => {
   }
 
   const handleDelete = async () => {
+    if (!eventHash) return;
     const success = await deleteEvent(eventHash);
     if (success) {
       // Redirect to home page after successful deletion

src/app/community/[communitySubdomain]/page.tsx

@@ -5,7 +5,7 @@ import { UserProvider } from "src/context/UserContext";
 import { ClerkProvider } from "@clerk/nextjs";
 import { TooltipProvider } from "src/components/ui/tooltip";
 import { RsvpIntentionProvider } from "src/context/RsvpIntentionContext";
-import { createContext, useContext } from "react";
+import { createContext } from "react";
 import { CommunityProvider } from "src/context/CommunityContext";
 import { Toaster } from "react-hot-toast";
 import { DataLossBanner } from "src/components/DataLossBanner";
@@ -24,22 +24,22 @@ export default function Providers({
   isBetaMode?: boolean;
 }>) {
   return (
-    <ClerkProvider
-      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!}
-      signInUrl="/signin"
-      signUpUrl="/signup"
-      signInFallbackRedirectUrl="/"
-      signUpFallbackRedirectUrl="/"
-      afterSignOutUrl="/"
-      dynamic
-      appearance={{
-        elements: {
-          formButtonPrimary: "bg-primary hover:bg-primary/90",
-          card: "shadow-lg",
-        },
-      }}
-    >
-      <BetaModeContext.Provider value={isBetaMode || false}>
+    <BetaModeContext.Provider value={isBetaMode || false}>
+      <ClerkProvider
+        publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!}
+        signInUrl="/signin"
+        signUpUrl="/signup"
+        signInFallbackRedirectUrl="/"
+        signUpFallbackRedirectUrl="/"
+        afterSignOutUrl="/"
+        dynamic
+        appearance={{
+          elements: {
+            formButtonPrimary: "bg-primary hover:bg-primary/90",
+            card: "shadow-lg",
+          },
+        }}
+      >
         <QueryClientProvider client={queryClient}>
           <UserProvider>
             <CommunityProvider>
@@ -75,7 +75,7 @@ export default function Providers({
             </CommunityProvider>
           </UserProvider>
         </QueryClientProvider>
-      </BetaModeContext.Provider>
-    </ClerkProvider>
+      </ClerkProvider>
+    </BetaModeContext.Provider>
   );
 }