Perf improvements and billing updates

apps/web/app/(dashboard)/home/(user)/loading.tsx

@@ -1,3 +1,5 @@
 import { GlobalLoader } from '@kit/ui/global-loader';
 
-export default GlobalLoader;
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+export default withI18n(GlobalLoader);

apps/web/app/(dashboard)/home/[account]/billing/_components/team-account-checkout-form.tsx

@@ -26,6 +26,7 @@ export function TeamAccountCheckoutForm(params: { accountId: string }) {
   if (checkoutToken) {
     return (
       <EmbeddedCheckout
+        load
         checkoutToken={checkoutToken}
         provider={billingConfig.provider}
       />

apps/web/app/(dashboard)/home/[account]/billing/return/page.tsx

@@ -16,11 +16,18 @@ interface SessionPageProps {
   };
 }
 
-const LazyEmbeddedCheckout = dynamic(async () => {
-  const { EmbeddedCheckout } = await import('@kit/billing-gateway/components');
+const LazyEmbeddedCheckout = dynamic(
+  async () => {
+    const { EmbeddedCheckout } = await import(
+      '@kit/billing-gateway/components'
+    );
 
-  return EmbeddedCheckout;
-});
+    return EmbeddedCheckout;
+  },
+  {
+    ssr: false,
+  },
+);
 
 async function ReturnStripeSessionPage({ searchParams }: SessionPageProps) {
   const { customerEmail, checkoutToken } = await loadCheckoutSession(

apps/web/app/(dashboard)/home/[account]/loading.tsx

@@ -1,3 +1,5 @@
 import { GlobalLoader } from '@kit/ui/global-loader';
 
-export default GlobalLoader;
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+export default withI18n(GlobalLoader);

apps/web/app/(dashboard)/home/loading.tsx

@@ -1,3 +1,5 @@
 import { GlobalLoader } from '@kit/ui/global-loader';
 
-export default GlobalLoader;
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+export default withI18n(GlobalLoader);

apps/web/app/(marketing)/_components/site-navigation.tsx

@@ -44,7 +44,7 @@ export function SiteNavigation() {
     <>
       <div className={'hidden items-center lg:flex'}>
         <NavigationMenu>
-          <NavigationMenuList className={'space-x-2.5'}>
+          <NavigationMenuList className={'space-x-3'}>
             <NavigationMenuItem>
               <Link className={className} href={links.Blog.path}>
                 {links.Blog.label}

apps/web/app/(marketing)/blog/[slug]/page.tsx

@@ -9,7 +9,7 @@ import Post from '~/(marketing)/blog/_components/post';
 import appConfig from '~/config/app.config';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-export async function generateMetadata({
+export function generateMetadata({
   params,
 }: {
   params: { slug: string };
@@ -49,7 +49,7 @@ export async function generateMetadata({
   };
 }
 
-async function BlogPost({ params }: { params: { slug: string } }) {
+function BlogPost({ params }: { params: { slug: string } }) {
   const post = allPosts.find((post) => post.slug === params.slug);
 
   if (!post) {

apps/web/app/(marketing)/blog/_components/post.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
+import dynamic from 'next/dynamic';
 
 import type { Post as PostType } from 'contentlayer/generated';
 
-import { Mdx } from '@kit/ui/mdx';
-
 import { PostHeader } from './post-header';
 
+const Mdx = dynamic(() =>
+  import('@kit/ui/mdx').then((mod) => ({ default: mod.Mdx })),
+);
+
 export const Post: React.FC<{
   post: PostType;
   content: string;

apps/web/app/(marketing)/loading.tsx

@@ -1,3 +1,5 @@
 import { GlobalLoader } from '@kit/ui/global-loader';
 
-export default GlobalLoader;
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+export default withI18n(GlobalLoader);

apps/web/app/loading.tsx

@@ -0,0 +1,5 @@
+import { GlobalLoader } from '@kit/ui/global-loader';
+
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+export default withI18n(GlobalLoader);

apps/web/app/not-found.tsx

@@ -2,6 +2,7 @@ import Link from 'next/link';
 
 import { ArrowLeft } from 'lucide-react';
 
+import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { Trans } from '@kit/ui/trans';
@@ -14,10 +15,16 @@ export const metadata = {
   title: `Page not found - ${appConfig.name}`,
 };
 
-const NotFoundPage = () => {
+const NotFoundPage = async () => {
+  const client = getSupabaseServerComponentClient();
+
+  const {
+    data: { session },
+  } = await client.auth.getSession();
+
   return (
     <div className={'flex h-screen flex-1 flex-col'}>
-      <SiteHeader session={null} />
+      <SiteHeader session={session} />
 
       <div
         className={

apps/web/middleware.ts

@@ -143,12 +143,14 @@ function getPatterns() {
         const supabase = createMiddlewareClient(req, res);
         const { data, error } = await supabase.auth.getSession();
         const origin = req.nextUrl.origin;
+        const next = req.nextUrl.pathname;
 
         // If user is not logged in, redirect to sign in page.
         if (!data.session || error) {
-          return NextResponse.redirect(
-            new URL(pathsConfig.auth.signIn, origin).href,
-          );
+          const signIn = pathsConfig.auth.signIn;
+          const redirectPath = `${signIn}?next=${next}`;
+
+          return NextResponse.redirect(new URL(redirectPath, origin).href);
         }
 
         const requiresMultiFactorAuthentication =

apps/web/next.config.mjs

@@ -3,35 +3,49 @@ import withBundleAnalyzer from '@next/bundle-analyzer';
 const IS_PRODUCTION = process.env.NODE_ENV === 'production';
 const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL;
 
+const INTERNAL_PACKAGES = [
+  '@kit/ui',
+  '@kit/auth',
+  '@kit/accounts',
+  '@kit/team-accounts',
+  '@kit/shared',
+  '@kit/supabase',
+  '@kit/i18n',
+  '@kit/mailers',
+  '@kit/billing',
+  '@kit/billing-gateway',
+  '@kit/stripe',
+];
+
 /** @type {import('next').NextConfig} */
 const config = {
   reactStrictMode: true,
+  swcMinify: true,
   /** Enables hot reloading for local packages without a build step */
-  transpilePackages: [
-    '@kit/ui',
-    '@kit/auth',
-    '@kit/accounts',
-    '@kit/team-accounts',
-    '@kit/shared',
-    '@kit/supabase',
-    '@kit/i18n',
-    '@kit/mailers',
-    '@kit/billing',
-    '@kit/billing-gateway',
-    '@kit/stripe',
-  ],
+  transpilePackages: INTERNAL_PACKAGES,
   pageExtensions: ['ts', 'tsx'],
   images: {
     remotePatterns: getRemotePatterns(),
   },
   experimental: {
     mdxRs: true,
-    optimizePackageImports: []
+    optimizePackageImports: [
+      'recharts',
+      'lucide-react',
+      '@radix-ui/react-icons',
+      '@radix-ui/react-avatar',
+      '@radix-ui/react-select',
+      'date-fns',
+      ...INTERNAL_PACKAGES,
+    ],
   },
   modularizeImports: {
-    "lucide-react": {
-      transform: "lucide-react/dist/esm/icons/{{ kebabCase member }}",
-    }
+    'lucide-react': {
+      transform: 'lucide-react/dist/esm/icons/{{ kebabCase member }}',
+    },
+    lodash: {
+      transform: 'lodash/{{member}}',
+    },
   },
   /** We already do linting and typechecking as separate tasks in CI */
   eslint: { ignoreDuringBuilds: true },

apps/web/package.json

@@ -2,11 +2,12 @@
   "name": "web",
   "version": "0.1.0",
   "private": true,
+  "sideEffects": false,
   "scripts": {
     "analyze": "ANALYZE=true pnpm run build",
     "build": "pnpm with-env next build",
     "clean": "git clean -xdf .next .turbo node_modules",
-    "dev": "pnpm with-env next dev",
+    "dev": "pnpm with-env next dev --turbo",
     "lint": "next lint",
     "format": "prettier --check \"**/*.{js,cjs,mjs,ts,tsx,md,json}\"",
     "start": "pnpm with-env next start",
@@ -44,7 +45,7 @@
     "next-contentlayer": "0.3.4",
     "react-i18next": "^14.1.0",
     "date-fns": "^3.2.0",
-    "next": "^14.2.0-canary.41",
+    "next": "canary",
     "next-sitemap": "^4.2.3",
     "next-themes": "^0.2.1",
     "react": "18.2.0",
@@ -60,7 +61,7 @@
     "@kit/prettier-config": "^0.1.0",
     "@kit/tailwind-config": "^0.1.0",
     "@kit/tsconfig": "^0.1.0",
-    "@next/bundle-analyzer": "^14.2.0-canary.41",
+    "@next/bundle-analyzer": "canary",
     "@types/mdx": "^2.0.10",
     "@types/node": "^20.11.5",
     "@types/react": "^18.2.48",
@@ -81,4 +82,4 @@
     ]
   },
   "prettier": "@kit/prettier-config"
-}
+}