Clean up old stuff

Author: aurorascharff

app/_patterns/search-params/page.tsx

@@ -10,8 +10,6 @@ const options = [
   { name: 'Items Per Page', value: 'perPage', items: ['10', '25', '100'] },
 ];
 
-export const dynamic = 'force-dynamic';
-
 export default async function Page(props: { searchParams: Promise<any> }) {
   const searchParams = await props.searchParams;
   return (

app/api/og/route.tsx

@@ -58,8 +58,7 @@ export async function GET(req: NextRequest): Promise<Response | ImageResponse> {
   } catch (e) {
     if (!(e instanceof Error)) throw e;
 
-    // eslint-disable-next-line no-console
-    console.log(e.message);
+    console.error(e.message);
     return new Response(`Failed to generate the image`, { status: 500 });
   }
 }

app/partial-fallbacks/[slug]/page.tsx

@@ -34,7 +34,8 @@ async function ProductDetail({ slug }: { slug: string }) {
 
   await new Promise((resolve) => setTimeout(resolve, 2000));
 
-  const product = db.product.find({ where: { id: slug } });
+  const productId = slug.split('-')[0];
+  const product = db.product.find({ where: { id: productId } });
   if (!product) {
     notFound();
   }

app/partial-fallbacks/_components/runtime-link.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { Product } from '#/lib/db';
+import { ProductCard } from '#/ui/product-card';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+
+export function RuntimeLink({ product }: { product: Product }) {
+  const [suffix, setSuffix] = useState('');
+
+  useEffect(() => {
+    setSuffix(Math.random().toString(36).slice(2, 8));
+  }, []);
+
+  const slug = suffix ? `${product.id}-${suffix}` : product.id;
+
+  return (
+    <Link href={`/partial-fallbacks/${slug}`} className="group">
+      <ProductCard product={product} animateEnter={true} />
+      <div className="mt-2 flex items-center gap-2">
+        <span className="text-sm font-medium text-gray-300 group-hover:text-gray-100">
+          {product.name}
+        </span>
+        <span className="rounded-full bg-orange-900/50 px-2 py-0.5 text-[10px] font-medium text-orange-400">
+          runtime
+        </span>
+      </div>
+    </Link>
+  );
+}

app/partial-fallbacks/page.tsx

@@ -4,6 +4,7 @@ import db from '#/lib/db';
 import { Boundary } from '#/ui/boundary';
 import { ProductCard } from '#/ui/product-card';
 import Link from 'next/link';
+import { RuntimeLink } from './_components/runtime-link';
 
 const PRE_RENDERED_IDS = ['1', '2', '3'];
 
@@ -22,32 +23,30 @@ export default async function Page() {
         <p className="text-sm text-gray-500">
           Products 1–3 are pre-rendered via{' '}
           <code className="text-gray-400">generateStaticParams</code>. Products
-          4–9 are discovered at runtime.
+          4–9 use a random slug so each click is a fresh cache miss.
         </p>
         <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-          {products.map((product) => (
-            <Link
-              key={product.id}
-              href={`/partial-fallbacks/${product.id}`}
-              className="group"
-            >
-              <ProductCard product={product} animateEnter={true} />
-              <div className="mt-2 flex items-center gap-2">
-                <span className="text-sm font-medium text-gray-300 group-hover:text-gray-100">
-                  {product.name}
-                </span>
-                {PRE_RENDERED_IDS.includes(product.id) ? (
+          {products.map((product) =>
+            PRE_RENDERED_IDS.includes(product.id) ? (
+              <Link
+                key={product.id}
+                href={`/partial-fallbacks/${product.id}`}
+                className="group"
+              >
+                <ProductCard product={product} animateEnter={true} />
+                <div className="mt-2 flex items-center gap-2">
+                  <span className="text-sm font-medium text-gray-300 group-hover:text-gray-100">
+                    {product.name}
+                  </span>
                   <span className="rounded-full bg-green-900/50 px-2 py-0.5 text-[10px] font-medium text-green-400">
                     pre-rendered
                   </span>
-                ) : (
-                  <span className="rounded-full bg-orange-900/50 px-2 py-0.5 text-[10px] font-medium text-orange-400">
-                    runtime
-                  </span>
-                )}
-              </div>
-            </Link>
-          ))}
+                </div>
+              </Link>
+            ) : (
+              <RuntimeLink key={product.id} product={product} />
+            ),
+          )}
         </div>
       </div>
     </Boundary>

app/partial-fallbacks/readme.mdx

@@ -29,11 +29,12 @@ const nextConfig = {
 
 - A product catalog with 9 products. Only 3 are in `generateStaticParams`.
 - Pre-rendered products (1–3) load instantly with no fallback.
-- Runtime-discovered products (4–9) show a skeleton while the page generates.
-- With `partialFallbacks: true`, runtime products get an instant shell and stream in. Refreshing shows the page is now fully static.
+- Runtime-discovered products (4–9) use a random slug on each click, guaranteeing a fresh cache miss every time.
+- With `partialFallbacks: true`, runtime products get an instant shell and stream in. Visiting the same URL again loads instantly from cache.
 
 ### Notes
 
 - This demo uses the experimental `partialFallbacks` flag.
-- Product detail pages use `cacheLife({ revalidate: 3600 })` (1 hour) so the cache expires and the streaming behavior can be re-demonstrated.
+- Runtime product links generate a random suffix (e.g., `/partial-fallbacks/4-x8k2m`) so each click from the list triggers a fresh runtime discovery.
+- Product detail pages use `cacheLife({ revalidate: 3600 })` (1 hour) so the cache eventually expires.
 - This demo uses the `use cache` directive.

next.config.ts

@@ -5,9 +5,7 @@ const nextConfig = {
   cacheComponents: true,
   pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
   experimental: {
-    // Disabled due to font error that's causing them not to be loaded
-    // correctly in the browser.
-    // inlineCss: true,
+    inlineCss: true,
     viewTransition: true,
     prerenderEarlyExit: false,
     partialFallbacks: true,

package.json

@@ -10,16 +10,16 @@
     "@heroicons/react": "2.2.0",
     "@mdx-js/loader": "3.1.0",
     "@mdx-js/react": "3.1.0",
-    "@next/mdx": "16.0.0-canary.9",
+    "@next/mdx": "16.2.2",
     "@types/mdx": "2.0.13",
     "clsx": "2.1.1",
     "codehike": "1.0.7",
     "date-fns": "4.1.0",
     "dinero.js": "2.0.0-alpha.10",
     "ms": "3.0.0-canary.1",
-    "next": "16.2.1-canary.25",
-    "react": "19.3.0-canary-7dc903cd-20251203",
-    "react-dom": "19.3.0-canary-7dc903cd-20251203",
+    "next": "16.2.2",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "recma-codehike": "0.0.1",
     "remark-codehike": "0.0.1",
     "server-only": "0.0.1",
@@ -33,8 +33,8 @@
     "@tailwindcss/typography": "0.5.16",
     "@types/ms": "2.1.0",
     "@types/node": "22.13.1",
-    "@types/react": "19.2.2",
-    "@types/react-dom": "19.2.2",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
     "postcss": "8.5.3",
     "prettier": "3.5.3",
     "prettier-plugin-tailwindcss": "0.6.12",