remove ppr, add ClientOnly

apps/web/app/app.dub.co/(dashboard)/layout.tsx

@@ -5,7 +5,7 @@ import { constructMetadata } from "@dub/utils";
 import { ReactNode } from "react";
 import Providers from "../../providers";
 
-export const experimental_ppr = true;
+export const dynamic = "force-static";
 export const metadata = constructMetadata();
 
 export default async function Layout({ children }: { children: ReactNode }) {

apps/web/next.config.js

@@ -14,7 +14,11 @@ module.exports = withAxiom({
   reactStrictMode: false,
   transpilePackages: ["shiki"],
   experimental: {
-    ppr: "incremental",
+    serverComponentsExternalPackages: [
+      "@react-email/components",
+      "@react-email/render",
+      "@react-email/tailwind",
+    ],
   },
   webpack: (config, { webpack, isServer }) => {
     if (isServer) {

apps/web/package.json

@@ -75,7 +75,7 @@
     "jszip": "^3.10.1",
     "lucide-react": "^0.367.0",
     "nanoid": "^5.0.1",
-    "next": "14.3.0-canary.58",
+    "next": "14.3.0-canary.42",
     "next-auth": "^4.24.4",
     "next-axiom": "^1.3.0",
     "next-plausible": "^3.12.0",

apps/web/ui/layout/main-nav.tsx

@@ -78,9 +78,7 @@ export function MainNav({
               )}
             />
           </div>
-          <div className="scrollbar-hide relative flex h-full w-full flex-col overflow-y-auto overflow-x-hidden">
-            <SidebarNav toolContent={toolContent} />
-          </div>
+          <SidebarNav toolContent={toolContent} />
         </div>
       </div>
       <div className="bg-neutral-100 md:pt-1.5">

apps/web/ui/layout/sidebar/sidebar-nav.tsx

@@ -1,5 +1,5 @@
 import useWorkspace from "@/lib/swr/use-workspace";
-import { Wordmark } from "@dub/ui";
+import { ClientOnly, Wordmark } from "@dub/ui";
 import { cn } from "@dub/utils";
 import { ChevronLeft } from "lucide-react";
 import Link from "next/link";
@@ -33,7 +33,7 @@ export function SidebarNav({ toolContent }: { toolContent?: ReactNode }) {
   }, [slug, pathname]);
 
   return (
-    <>
+    <ClientOnly className="scrollbar-hide relative flex h-full w-full flex-col overflow-y-auto overflow-x-hidden">
       <nav className="relative p-3 text-gray-500">
         <div className="relative flex items-start justify-between gap-1 pb-3">
           {AREAS.map((area) => (
@@ -100,7 +100,7 @@ export function SidebarNav({ toolContent }: { toolContent?: ReactNode }) {
         <UserSurveyButton />
         <Usage />
       </div>
-    </>
+    </ClientOnly>
   );
 }