Next.js 15 Update (#26)

* Update Next.js and React versions in all packages
* Replace onRedirect function with next/link in BillingSessionStatus, since it's no longer cached by default
* Remove unused revalidatePath import in billing return page, since it's no longer cached by default
* Add Turbopack module aliases to improve development server speed
* Converted new Dynamic APIs to be Promise-based
* Adjust mobile layout
* Use ENABLE_REACT_COMPILER to enable the React Compiler in Next.js 15
* Report Errors using the new onRequestError hook

packages/billing/gateway/package.json

@@ -27,14 +27,14 @@
     "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:^",
-    "@supabase/supabase-js": "^2.45.4",
-    "@types/react": "^18.3.10",
+    "@supabase/supabase-js": "^2.45.6",
+    "@types/react": "^18.3.11",
     "date-fns": "^4.1.0",
-    "lucide-react": "^0.446.0",
-    "next": "14.2.13",
-    "react": "18.3.1",
-    "react-hook-form": "^7.53.0",
-    "react-i18next": "^15.0.2",
+    "lucide-react": "^0.453.0",
+    "next": "15.0.0",
+    "react": "19.0.0-rc-69d4b800-20241021",
+    "react-hook-form": "^7.53.1",
+    "react-i18next": "^15.1.0",
     "zod": "^3.23.8"
   },
   "eslintConfig": {

packages/billing/gateway/src/components/billing-session-status.tsx

@@ -1,3 +1,5 @@
+import Link from 'next/link';
+
 import { Check, ChevronRight } from 'lucide-react';
 
 import { Button } from '@kit/ui/button';
@@ -11,10 +13,10 @@ import { Trans } from '@kit/ui/trans';
  **/
 export function BillingSessionStatus({
   customerEmail,
-  onRedirect,
+  redirectPath,
 }: React.PropsWithChildren<{
   customerEmail: string;
-  onRedirect: () => void;
+  redirectPath: string;
 }>) {
   return (
     <section
@@ -53,18 +55,17 @@ export function BillingSessionStatus({
           </p>
         </div>
 
-        <form>
-          <Button
-            data-test={'checkout-success-back-link'}
-            formAction={onRedirect}
-          >
-            <span>
-              <Trans i18nKey={'billing:checkoutSuccessBackButton'} />
-            </span>
+        <div>
+          <Button data-test={'checkout-success-back-link'} asChild>
+            <Link href={redirectPath}>
+              <span>
+                <Trans i18nKey={'billing:checkoutSuccessBackButton'} />
+              </span>
 
-            <ChevronRight className={'h-4'} />
+              <ChevronRight className={'h-4'} />
+            </Link>
           </Button>
-        </form>
+        </div>
       </div>
     </section>
   );

packages/billing/gateway/src/components/current-lifetime-order-card.tsx

@@ -14,7 +14,7 @@ import { Trans } from '@kit/ui/trans';
 import { CurrentPlanBadge } from './current-plan-badge';
 import { LineItemDetails } from './line-item-details';
 
-type Order = Tables<'orders'>
+type Order = Tables<'orders'>;
 type LineItem = Tables<'order_items'>;
 
 interface Props {

packages/billing/gateway/src/components/current-plan-alert.tsx

@@ -4,7 +4,7 @@ import { Trans } from '@kit/ui/trans';
 
 export function CurrentPlanAlert(
   props: React.PropsWithoutRef<{
-    status: Enums<'subscription_status'>
+    status: Enums<'subscription_status'>;
   }>,
 ) {
   let variant: 'success' | 'warning' | 'destructive';

packages/billing/gateway/src/components/pricing-table.tsx

@@ -397,12 +397,12 @@ function PlanIntervalSwitcher(
         const selected = plan === props.interval;
 
         const className = cn(
-          'focus:!ring-0 !outline-none animate-in transition-all fade-in',
+          'animate-in fade-in !outline-none transition-all focus:!ring-0',
           {
             'rounded-r-none border-r-transparent': index === 0,
             'rounded-l-none': index === props.intervals.length - 1,
-            ['hover:text-primary border text-muted-foreground']: !selected,
-            ['font-semibold cursor-default hover:text-initial hover:bg-background']:
+            ['hover:text-primary text-muted-foreground border']: !selected,
+            ['hover:text-initial hover:bg-background cursor-default font-semibold']:
               selected,
           },
         );

packages/billing/gateway/src/server/services/billing-webhooks/billing-webhooks.service.ts

@@ -4,7 +4,7 @@ import { Tables } from '@kit/supabase/database';
 
 import { createBillingGatewayService } from '../billing-gateway/billing-gateway.service';
 
-type Subscription = Tables<'subscriptions'>
+type Subscription = Tables<'subscriptions'>;
 
 export function createBillingWebhooksService() {
   return new BillingWebhooksService();