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
2024-10-22 08:39:21 +02:00
parent 93cb011260
commit 5b9285a575
109 changed files with 5143 additions and 5545 deletions
--- a/packages/billing/gateway/package.json
+++ b/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": {
--- a/packages/billing/gateway/src/components/billing-session-status.tsx
+++ b/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>
  );
--- a/packages/billing/gateway/src/components/current-lifetime-order-card.tsx
+++ b/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 {
--- a/packages/billing/gateway/src/components/current-plan-alert.tsx
+++ b/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';
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/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,
          },
        );
--- a/packages/billing/gateway/src/server/services/billing-webhooks/billing-webhooks.service.ts
+++ b/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();
--- a/packages/billing/lemon-squeezy/package.json
+++ b/packages/billing/lemon-squeezy/package.json
@@ -25,9 +25,9 @@
    "@kit/tailwind-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:^",
-    "@types/react": "^18.3.10",
-    "next": "14.2.13",
-    "react": "18.3.1",
+    "@types/react": "^18.3.11",
+    "next": "15.0.0",
+    "react": "19.0.0-rc-69d4b800-20241021",
    "zod": "^3.23.8"
  },
  "eslintConfig": {
--- a/packages/billing/stripe/package.json
+++ b/packages/billing/stripe/package.json
@@ -15,9 +15,9 @@
    "./components": "./src/components/index.ts"
  },
  "dependencies": {
-    "@stripe/react-stripe-js": "^2.8.0",
-    "@stripe/stripe-js": "^4.6.0",
-    "stripe": "^16.12.0"
+    "@stripe/react-stripe-js": "^2.8.1",
+    "@stripe/stripe-js": "^4.9.0",
+    "stripe": "^17.2.1"
  },
  "devDependencies": {
    "@kit/billing": "workspace:^",
@@ -28,10 +28,10 @@
    "@kit/tailwind-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@kit/ui": "workspace:^",
-    "@types/react": "^18.3.10",
+    "@types/react": "^18.3.11",
    "date-fns": "^4.1.0",
-    "next": "14.2.13",
-    "react": "18.3.1",
+    "next": "15.0.0",
+    "react": "19.0.0-rc-69d4b800-20241021",
    "zod": "^3.23.8"
  },
  "eslintConfig": {
--- a/packages/billing/stripe/src/services/create-stripe-checkout.ts
+++ b/packages/billing/stripe/src/services/create-stripe-checkout.ts
@@ -34,13 +34,16 @@ export async function createStripeCheckout(

  const isSubscription = mode === 'subscription';

-  const trialSettings = params.plan.trialDays && enableTrialWithoutCreditCard ? {
-    trial_settings: {
-      end_behavior: {
-        missing_payment_method: 'cancel' as const,
-      },
-    },
-  } : {};
+  const trialSettings =
+    params.plan.trialDays && enableTrialWithoutCreditCard
+      ? {
+          trial_settings: {
+            end_behavior: {
+              missing_payment_method: 'cancel' as const,
+            },
+          },
+        }
+      : {};

  // this should only be set if the mode is 'subscription'
  const subscriptionData:
@@ -96,11 +99,12 @@ export async function createStripeCheckout(
    };
  });

-  const paymentCollectionMethod = enableTrialWithoutCreditCard && params.plan.trialDays
-    ? {
-        payment_method_collection: 'if_required' as const,
-      }
-    : {};
+  const paymentCollectionMethod =
+    enableTrialWithoutCreditCard && params.plan.trialDays
+      ? {
+          payment_method_collection: 'if_required' as const,
+        }
+      : {};

  return stripe.checkout.sessions.create({
    mode,
--- a/packages/billing/stripe/src/services/stripe-sdk.ts
+++ b/packages/billing/stripe/src/services/stripe-sdk.ts
@@ -2,7 +2,7 @@ import 'server-only';

 import { StripeServerEnvSchema } from '../schema/stripe-server-env.schema';

-const STRIPE_API_VERSION = '2024-06-20';
+const STRIPE_API_VERSION = '2024-09-30.acacia';

 /**
 * @description returns a Stripe instance
--- a/packages/billing/stripe/src/services/stripe-webhook-handler.service.ts
+++ b/packages/billing/stripe/src/services/stripe-webhook-handler.service.ts
@@ -38,8 +38,7 @@ export class StripeWebhookHandlerService

  constructor(private readonly config: BillingConfig) {}

-  private readonly provider: BillingProvider =
-    'stripe';
+  private readonly provider: BillingProvider = 'stripe';

  private readonly namespace = 'billing.stripe';