Merge pull request #5 from startstack-io/chore/next-rc1-upgrade

Next15 RC2 update

actions/auth.ts

@@ -11,6 +11,7 @@ import { z } from "zod"
 import { providers, signIn, signOut } from "@/auth"
 import { captureEvent } from "@/lib/capture-event"
 import { logger } from "@/lib/logger"
+import { getDistinctId } from "@/lib/post-hog"
 
 const emailSchema = z.string().email()
 const EmailSignIn = z
@@ -73,8 +74,11 @@ export async function signInAction({
     redirectTo,
   })
 
+  // Get distinctId relies on cookies which are not supported in after
+  const distinctId = await getDistinctId()
   after(async () => {
     await captureEvent({
+      distinctId,
       event: `sign_in_via_${provider}`,
       properties: { email, status: "success" },
     })
@@ -120,8 +124,11 @@ export async function signUpAction({
     redirectTo,
   })
 
+  // Get distinctId relies on cookies which are not supported in after
+  const distinctId = await getDistinctId()
   after(async () => {
     await captureEvent({
+      distinctId,
       event: `sign_up_via_${provider}`,
       properties: { email, status: "success" },
     })

actions/newsletter.ts

@@ -16,6 +16,7 @@ import { z } from "zod"
 import { captureEvent } from "@/lib/capture-event"
 import { resendAudienceId, resendEnabled } from "@/lib/constants"
 import { logger } from "@/lib/logger"
+import { getDistinctId } from "@/lib/post-hog"
 
 const SubscribeToNewsletterSchema = z.object({
   email: z.string().email(),
@@ -49,8 +50,11 @@ export async function subscribeToNewsletter(email: string) {
     throw new Error(createContactResponse.error.message)
   }
 
+  // Get distinctId relies on cookies which are not supported in after
+  const distinctId = await getDistinctId()
   after(async () => {
     await captureEvent({
+      distinctId,
       event: "newsletter_signup",
       properties: { email, audienceId: resendAudienceId, status: "success" },
     })

app/(app)/account/page.tsx

@@ -14,16 +14,16 @@ export const metadata = {
   title: "Account",
 }
 
-export default function AccountPage({
-  searchParams,
-}: {
-  searchParams: { page: string }
+export default async function AccountPage(props: {
+  searchParams: Promise<{ page: string }>
 }) {
-  const page: number = searchParams.page ? parseInt(searchParams.page) : 1
+  const searchParams = await props.searchParams
+  const { page } = searchParams
+  const pageNumber: number = page ? parseInt(page) : 1
   // Preload data for the account page
   currentUser.paymentMethods({ limit: 1 })
   currentUser.subscriptions({ limit: 1 })
-  currentUser.invoices({ page })
+  currentUser.invoices({ page: pageNumber })
 
   return (
     <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
@@ -41,7 +41,7 @@ export default function AccountPage({
           <PaymentMethodCard />
           <SubscriptionPlanCard />
           <div className="flex flex-col gap-4 md:col-span-2">
-            <InvoiceCard page={page} />
+            <InvoiceCard page={pageNumber} />
           </div>
         </div>
       </main>

app/(app)/layout.tsx

@@ -10,12 +10,7 @@ import { ThemeProvider } from "@/components/theme-provider"
 import { DesktopNav } from "./_components/nav"
 import { NavProvider } from "./_components/nav/provider"
 
-const PostHogPageView = dynamic(
-  () => import("@/components/post-hog-page-view"),
-  {
-    ssr: false,
-  }
-)
+const PostHogPageView = dynamic(() => import("@/components/post-hog-page-view"))
 
 const fontSans = FontSans({
   subsets: ["latin"],

app/(auth)/layout.tsx

@@ -8,12 +8,7 @@ import { cn } from "@/lib/utils"
 import { PostHogProvider } from "@/components/post-hog-provider"
 import { ThemeProvider } from "@/components/theme-provider"
 
-const PostHogPageView = dynamic(
-  () => import("@/components/post-hog-page-view"),
-  {
-    ssr: false,
-  }
-)
+const PostHogPageView = dynamic(() => import("@/components/post-hog-page-view"))
 
 const fontSans = FontSans({
   subsets: ["latin"],

app/(marketing)/checkout/page.tsx

@@ -2,11 +2,10 @@ import { redirect } from "next/navigation"
 import { checkout } from "@/services/checkout"
 import { EmbeddedStripeForm } from "./_components/embedded-stripe-form"
 
-export default async function CheckoutPage({
-  searchParams,
-}: {
-  searchParams: { p: string }
+export default async function CheckoutPage(props: {
+  searchParams: Promise<{ p: string }>
 }) {
+  const searchParams = await props.searchParams
   const { p } = searchParams
 
   // create a checkout session

app/(marketing)/checkout/thank-you/page.tsx

@@ -4,14 +4,14 @@ import { checkout } from "@/services/checkout"
 import { captureEvent } from "@/lib/capture-event"
 import { appName } from "@/lib/constants"
 import { logger } from "@/lib/logger"
+import { getDistinctId } from "@/lib/post-hog"
 import { Button } from "@/components/ui/button"
 import { AuthBoundary } from "@/components/boundaries"
 
-export default async function ThankYouPage({
-  searchParams,
-}: {
-  searchParams: { id: string | undefined }
+export default async function ThankYouPage(props: {
+  searchParams: Promise<{ id: string | undefined }>
 }) {
+  const searchParams = await props.searchParams
   const checkoutResponse = await checkout.sessions.get({
     sessionId: searchParams.id as string,
   })
@@ -29,12 +29,14 @@ export default async function ThankYouPage({
   }
 
   // capture the event in posthog
+  const distinctId = await getDistinctId()
   after(async () => {
     if (
       checkoutResponse.status === "success" &&
       checkoutResponse.session.status === "complete"
     ) {
       await captureEvent({
+        distinctId,
         event: "checkout_session_completed",
         properties: {
           priceId: checkoutResponse.session.line_items?.data[0].price?.id,

app/(marketing)/layout.tsx

@@ -18,12 +18,7 @@ import { ThemeProvider } from "@/components/theme-provider"
 import { Footer } from "./_components/footer"
 import { Header } from "./_components/header"
 
-const PostHogPageView = dynamic(
-  () => import("@/components/post-hog-page-view"),
-  {
-    ssr: false,
-  }
-)
+const PostHogPageView = dynamic(() => import("@/components/post-hog-page-view"))
 
 const fontSans = FontSans({
   subsets: ["latin"],

app/(onboarding)/layout.tsx

@@ -8,12 +8,7 @@ import { cn } from "@/lib/utils"
 import { PostHogProvider } from "@/components/post-hog-provider"
 import { ThemeProvider } from "@/components/theme-provider"
 
-const PostHogPageView = dynamic(
-  () => import("@/components/post-hog-page-view"),
-  {
-    ssr: false,
-  }
-)
+const PostHogPageView = dynamic(() => import("@/components/post-hog-page-view"))
 
 const fontSans = FontSans({
   subsets: ["latin"],

lib/capture-event.ts

@@ -26,7 +26,7 @@ export async function captureEvent(event: Event) {
 
   // If there is no distinctId, attempt to get one from the cookie.
   // If there is no cookie, getDistinctId will generate a new one using nanoid()
-  if (!event.distinctId) event.distinctId = getDistinctId()
+  if (!event.distinctId) event.distinctId = await getDistinctId()
 
   const postHog = postHogClient()
   if (!postHog) return

lib/post-hog.ts

@@ -19,8 +19,8 @@ export function postHogClient() {
   })
 }
 
-export function getDistinctId() {
-  const cookie = cookies().get(
+export async function getDistinctId() {
+  const cookie = (await cookies()).get(
     `ph_${process.env.NEXT_PUBLIC_POSTHOG_KEY!}_posthog`
   )
   if (!cookie) return nanoid()

next.config.mjs → next.config.ts

@@ -1,7 +1,7 @@
+import type { NextConfig } from "next"
 import { withSentryConfig } from "@sentry/nextjs"
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+const nextConfig: NextConfig = {
   experimental: {
     after: true,
     reactCompiler: true,

package.json

@@ -27,26 +27,26 @@
     "@radix-ui/react-dropdown-menu": "2.1.1",
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-tooltip": "1.1.1",
-    "@sentry/nextjs": "^8.30.0",
+    "@sentry/nextjs": "^8.34.0",
     "@stripe/react-stripe-js": "^2.8.0",
     "@stripe/stripe-js": "^4.3.0",
     "@vercel/postgres": "^0.9.0",
-    "babel-plugin-react-compiler": "0.0.0-experimental-9e9694c-20240826",
+    "babel-plugin-react-compiler": "0.0.0-experimental-c23de8d-20240515",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "dotenv": "^16.4.5",
     "drizzle-orm": "^0.33.0",
     "lucide-react": "^0.436.0",
     "nanoid": "^5.0.7",
-    "next": "15.0.0-canary.160",
+    "next": "15.0.0-rc.1",
     "next-auth": "5.0.0-beta.20",
     "next-themes": "^0.3.0",
     "posthog-js": "^1.161.5",
     "posthog-node": "^4.2.0",
-    "react": "19.0.0-rc-e740d4b1-20240919",
-    "react-dom": "19.0.0-rc-e740d4b1-20240919",
+    "react": "19.0.0-rc-cd22717c-20241013",
+    "react-dom": "19.0.0-rc-cd22717c-20241013",
     "react-error-boundary": "^4.0.13",
-    "react-is": "19.0.0-rc-e740d4b1-20240919",
+    "react-is": "19.0.0-rc-cd22717c-20241013",
     "recharts": "2.13.0-alpha.5",
     "resend": "^4.0.0",
     "server-only": "^0.0.1",
@@ -61,8 +61,8 @@
     "@types/react": "npm:[email protected]",
     "@types/react-dom": "npm:[email protected]",
     "drizzle-kit": "^0.24.0",
-    "eslint": "^8",
-    "eslint-config-next": "15.0.0-canary.160",
+    "eslint": "^9.12.0",
+    "eslint-config-next": "15.0.0-rc.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-tailwindcss": "^3.17.0",
     "postcss": "^8",
@@ -81,9 +81,9 @@
     },
     "peerDependencyRules": {
       "allowedVersions": {
-        "next": "15.0.0-canary.160",
-        "react": "19.0.0-rc-e740d4b1-20240919",
-        "react-dom": "19.0.0-rc-e740d4b1-20240919"
+        "next": "15.0.0-rc.1",
+        "react": "19.0.0-rc-cd22717c-20241013",
+        "react-dom": "19.0.0-rc-cd22717c-20241013"
       },
       "allowAny": [
         "@types/react",