cache components

.claude/settings.local.json

@@ -0,0 +1,11 @@
+{
+  "permissions": {
+    "allow": [
+      "mcp__next-devtools__init",
+      "mcp__next-devtools__enable_cache_components",
+      "Bash(pnpm run build:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

.gitignore

@@ -38,4 +38,5 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts
+.env*.local

next.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  cacheComponents: true,
   experimental: {
-    ppr: true,
     inlineCss: true,
   },
   reactCompiler: true,
@@ -10,6 +10,7 @@ const nextConfig = {
   },
   images: {
     minimumCacheTTL: 31536000,
+    qualities: [65, 75, 80],
     remotePatterns: [
       {
         protocol: "https",

package.json

@@ -18,7 +18,8 @@
     "@effect/platform": "^0.68.6",
     "@effect/platform-node": "^0.63.6",
     "@neondatabase/serverless": "^1.0.2",
-    "@next/env": "^14.2.15",
+    "@next/env": "16.1.0",
+    "@opentelemetry/api": "^1.9.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
@@ -31,6 +32,7 @@
     "@vercel/blob": "^0.25.1",
     "@vercel/functions": "^1.4.2",
     "@vercel/kv": "^3.0.0",
+    "@vercel/otel": "^2.1.0",
     "@vercel/speed-insights": "^1.0.12",
     "ai": "^3.4.16",
     "babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
@@ -43,10 +45,10 @@
     "jose": "^5.9.4",
     "linkedom": "^0.18.5",
     "lucide-react": "^0.453.0",
-    "next": "15.6.0-canary.60",
+    "next": "16.2.0-canary.39",
     "openai": "^4.68.0",
-    "react": "19.0.0-rc-cd22717c-20241013",
-    "react-dom": "19.0.0-rc-cd22717c-20241013",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "react-scan": "^0.0.35",
     "slugify": "^1.6.6",
     "sonner": "^1.5.0",
@@ -56,11 +58,11 @@
   },
   "devDependencies": {
     "@types/node": "^20.16.12",
-    "@types/react": "npm:types-react@19.0.0-rc.1",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
     "drizzle-kit": "^0.26.2",
     "eslint": "^8.57.1",
-    "eslint-config-next": "15.0.0-rc.1",
+    "eslint-config-next": "16.1.0",
     "postcss": "^8.4.47",
     "postcss-hover-media-feature": "^1.0.2",
     "prettier-plugin-tailwindcss": "^0.6.8",
@@ -69,8 +71,8 @@
   },
   "pnpm": {
     "overrides": {
-      "@types/react": "npm:types-react@19.0.0-rc.1",
-      "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
+      "@types/react": "19.2.7",
+      "@types/react-dom": "19.2.3",
       "react": "19.0.0-rc-cd22717c-20241013",
       "react-dom": "19.0.0-rc-cd22717c-20241013"
     }

src/app/(category-sidebar)/[collection]/page.tsx

@@ -2,20 +2,19 @@ import { Link } from "@/components/ui/link";
 import { db } from "@/db";
 import { collections } from "@/db/schema";
 import { getCollectionDetails } from "@/lib/queries";
+import { cacheLife } from "next/cache";
 
 import Image from "next/image";
 
 export async function generateStaticParams() {
   return await db.select({ collection: collections.slug }).from(collections);
 }
 
-export default async function Home(props: {
-  params: Promise<{
-    collection: string;
-  }>;
-}) {
-  const collectionName = decodeURIComponent((await props.params).collection);
+async function CachedCollectionPage({ collection }: { collection: string }) {
+  "use cache";
+  cacheLife({ revalidate: 60 * 60 * 24 }); // 1 day
 
+  const collectionName = decodeURIComponent(collection);
   const collections = await getCollectionDetails(collectionName);
   let imageCount = 0;
 
@@ -27,7 +26,6 @@ export default async function Home(props: {
           <div className="flex flex-row flex-wrap justify-center gap-2 border-b-2 py-4 sm:justify-start">
             {collection.categories.map((category) => (
               <Link
-                prefetch={true}
                 key={category.name}
                 className="flex w-[125px] flex-col items-center text-center"
                 href={`/products/${category.slug}`}
@@ -51,3 +49,13 @@ export default async function Home(props: {
     </div>
   );
 }
+
+export default async function Home(props: {
+  params: Promise<{
+    collection: string;
+  }>;
+}) {
+  const { collection } = await props.params;
+
+  return <CachedCollectionPage collection={collection} />;
+}

src/app/(category-sidebar)/layout.tsx

@@ -17,7 +17,6 @@ export default async function Layout({
           {allCollections.map((collection) => (
             <li key={collection.slug} className="w-full">
               <Link
-                prefetch={true}
                 href={`/${collection.slug}`}
                 className="block w-full py-1 text-xs text-gray-800 hover:bg-accent2 hover:underline"
               >

src/app/(category-sidebar)/page.tsx

@@ -1,9 +1,13 @@
 import { Link } from "@/components/ui/link";
 import { getCollections, getProductCount } from "@/lib/queries";
+import { cacheLife } from "next/cache";
 
 import Image from "next/image";
 
-export default async function Home() {
+async function CachedHomePage() {
+  "use cache";
+  cacheLife({ revalidate: 60 * 60 * 24 }); // 1 day
+
   const [collections, productCount] = await Promise.all([
     getCollections(),
     getProductCount(),
@@ -21,7 +25,6 @@ export default async function Home() {
           <div className="flex flex-row flex-wrap justify-center gap-2 border-b-2 py-4 sm:justify-start">
             {collection.categories.map((category) => (
               <Link
-                prefetch={true}
                 key={category.name}
                 className="flex w-[125px] flex-col items-center text-center"
                 href={`/products/${category.slug}`}
@@ -45,3 +48,7 @@ export default async function Home() {
     </div>
   );
 }
+
+export default async function Home() {
+  return <CachedHomePage />;
+}

src/app/(category-sidebar)/products/[category]/[subcategory]/[product]/page.tsx

@@ -3,6 +3,7 @@ import Image from "next/image";
 import { notFound } from "next/navigation";
 import { AddToCartForm } from "@/components/add-to-cart-form";
 import { Metadata } from "next";
+import { cacheLife } from "next/cache";
 
 import { getProductDetails, getProductsForSubcategory } from "@/lib/queries";
 // import { db } from "@/db";
@@ -28,6 +29,16 @@ import { getProductDetails, getProductsForSubcategory } from "@/lib/queries";
 //   }));
 // }
 
+export async function generateStaticParams() {
+  return [
+    {
+      product: "__placeholder__",
+      subcategory: "__placeholder__",
+      category: "__placeholder__",
+    },
+  ];
+}
+
 export async function generateMetadata(props: {
   params: Promise<{ product: string; category: string; subcategory: string }>;
 }): Promise<Metadata> {
@@ -45,14 +56,18 @@ export async function generateMetadata(props: {
   };
 }
 
-export default async function Page(props: {
-  params: Promise<{
-    product: string;
-    subcategory: string;
-    category: string;
-  }>;
+async function CachedProductPage({
+  product,
+  subcategory,
+  category,
+}: {
+  product: string;
+  subcategory: string;
+  category: string;
 }) {
-  const { product, subcategory, category } = await props.params;
+  "use cache";
+  cacheLife({ revalidate: 60 * 60 * 24 }); // 1 day
+
   const urlDecodedProduct = decodeURIComponent(product);
   const urlDecodedSubcategory = decodeURIComponent(subcategory);
   const [productData, relatedUnshifted] = await Promise.all([
@@ -102,18 +117,40 @@ export default async function Page(props: {
           </h2>
         )}
         <div className="flex flex-row flex-wrap gap-2">
-          {related?.map((product) => (
+          {related?.map((p) => (
             <ProductLink
-              key={product.name}
+              key={p.name}
               loading="lazy"
               category_slug={category}
               subcategory_slug={subcategory}
-              product={product}
-              imageUrl={product.image_url}
+              product={p}
+              imageUrl={p.image_url}
             />
           ))}
         </div>
       </div>
     </div>
   );
 }
+
+export default async function Page(props: {
+  params: Promise<{
+    product: string;
+    subcategory: string;
+    category: string;
+  }>;
+}) {
+  const { product, subcategory, category } = await props.params;
+
+  if (product === "__placeholder__") {
+    return notFound();
+  }
+
+  return (
+    <CachedProductPage
+      product={product}
+      subcategory={subcategory}
+      category={category}
+    />
+  );
+}

src/app/(category-sidebar)/products/[category]/[subcategory]/page.tsx

@@ -1,6 +1,7 @@
 import { notFound } from "next/navigation";
 import { ProductLink } from "@/components/ui/product-card";
 import type { Metadata } from "next";
+import { cacheLife } from "next/cache";
 import {
   getProductsForSubcategory,
   getSubcategory,
@@ -24,10 +25,24 @@ import {
 //   }));
 // }
 
+export async function generateStaticParams() {
+  return [
+    {
+      subcategory: "__placeholder__",
+      category: "__placeholder__",
+    },
+  ];
+}
+
 export async function generateMetadata(props: {
   params: Promise<{ category: string; subcategory: string }>;
 }): Promise<Metadata> {
   const { subcategory: subcategoryParam } = await props.params;
+
+  if (subcategoryParam === "__placeholder__") {
+    return notFound();
+  }
+
   const urlDecodedCategory = decodeURIComponent(subcategoryParam);
 
   const [subcategory, rows] = await Promise.all([
@@ -48,14 +63,16 @@ export async function generateMetadata(props: {
   };
 }
 
-export default async function Page(props: {
-  params: Promise<{
-    subcategory: string;
-    category: string;
-  }>;
+async function CachedSubcategoryPage({
+  subcategory,
+  category,
+}: {
+  subcategory: string;
+  category: string;
 }) {
-  const { subcategory, category } = await props.params;
-  // const urlDecodedCategory = decodeURIComponent(category);
+  "use cache";
+  cacheLife({ revalidate: 60 * 60 * 24 }); // 1 day
+
   const urlDecodedSubcategory = decodeURIComponent(subcategory);
   const [products, countRes] = await Promise.all([
     getProductsForSubcategory(urlDecodedSubcategory),
@@ -91,3 +108,20 @@ export default async function Page(props: {
     </div>
   );
 }
+
+export default async function Page(props: {
+  params: Promise<{
+    subcategory: string;
+    category: string;
+  }>;
+}) {
+  const { subcategory, category } = await props.params;
+
+  if (subcategory === "__placeholder__") {
+    return notFound();
+  }
+
+  return (
+    <CachedSubcategoryPage subcategory={subcategory} category={category} />
+  );
+}

src/app/(category-sidebar)/products/[category]/page.tsx

@@ -15,6 +15,7 @@ export default async function Page(props: {
   }>;
 }) {
   const { category } = await props.params;
+
   const urlDecoded = decodeURIComponent(category);
   const cat = await getCategory(urlDecoded);
   if (!cat) {
@@ -42,7 +43,6 @@ export default async function Page(props: {
               {subcollection.subcategories.map(
                 (subcategory, subcategoryIndex) => (
                   <Link
-                    prefetch={true}
                     key={subcategoryIndex}
                     className="group flex h-full w-full flex-row gap-2 border px-4 py-2 hover:bg-gray-100 sm:w-[200px]"
                     href={`/products/${category}/${subcategory.slug}`}