fix(next): export track from Next.js binding and fix hard-refresh event loss

apps/nextjs-15/src/app/blog/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import styles from '../layout.module.css';
 
 export default async function BlogPage({
   params,
@@ -7,10 +8,15 @@ export default async function BlogPage({
 }) {
   const { slug } = await params;
   return (
-    <div>
-      <h2>{slug}</h2>
-
-      <Link href="/blog">Back to blog</Link>
-    </div>
+    <>
+      <span className={styles.badge}>Blog</span>
+      <h1>{slug.replace(/-/g, ' ')}</h1>
+      <p className={styles.description}>
+        This is the post content for &ldquo;{slug}&rdquo;.
+      </p>
+      <Link className={styles.back} href="/blog">
+        All posts
+      </Link>
+    </>
   );
 }

apps/nextjs-15/src/app/blog/layout.module.css

@@ -0,0 +1,136 @@
+.page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100svh;
+  padding: 80px;
+  font-family: var(--font-geist-sans);
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  max-width: 480px;
+  width: 100%;
+}
+
+.back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.4);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.back::before {
+  content: "←";
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.badge::before {
+  content: "";
+  display: block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #3b82f6;
+}
+
+.main h1 {
+  font-size: 36px;
+  font-weight: 600;
+  letter-spacing: -0.03em;
+  line-height: 1.15;
+  margin: 0;
+}
+
+.posts {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.post {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  font-size: 15px;
+  font-weight: 500;
+  transition:
+    background 0.15s,
+    border-color 0.15s;
+}
+
+.post::after {
+  content: "→";
+  opacity: 0.4;
+}
+
+.description {
+  font-size: 15px;
+  line-height: 1.6;
+  color: rgba(0, 0, 0, 0.5);
+  margin: 0;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .back:hover {
+    color: var(--foreground);
+  }
+
+  .post:hover {
+    background: rgba(0, 0, 0, 0.04);
+    border-color: rgba(0, 0, 0, 0.15);
+  }
+
+  .post:hover::after {
+    opacity: 1;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .back {
+    color: rgba(255, 255, 255, 0.4);
+  }
+
+  .badge {
+    color: rgba(255, 255, 255, 0.4);
+  }
+
+  .post {
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .post:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  .description {
+    color: rgba(255, 255, 255, 0.5);
+  }
+}
+
+@media (max-width: 600px) {
+  .page {
+    padding: 32px;
+    align-items: flex-start;
+    padding-top: 64px;
+  }
+}

apps/nextjs-15/src/app/blog/layout.tsx

@@ -1,12 +1,15 @@
 import Link from 'next/link';
+import styles from './layout.module.css';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div>
-      <Link href="/blog/my-first-blogpost">My first blog post</Link>&nbsp;
-      <Link href="/blog/new-feature-release">Feature just got released</Link>
-      <br />
-      <div>{children}</div>
+    <div className={styles.page}>
+      <main className={styles.main}>
+        <Link className={styles.back} href="/">
+          Home
+        </Link>
+        {children}
+      </main>
     </div>
   );
 }

apps/nextjs-15/src/app/blog/page.tsx

@@ -1,3 +1,19 @@
+import Link from 'next/link';
+import styles from './layout.module.css';
+
 export default function Blog() {
-  return <div>Welcome to the blog</div>;
+  return (
+    <>
+      <span className={styles.badge}>Blog</span>
+      <h1>Posts</h1>
+      <nav className={styles.posts}>
+        <Link className={styles.post} href="/blog/my-first-blogpost">
+          My first blog post
+        </Link>
+        <Link className={styles.post} href="/blog/new-feature-release">
+          Feature just got released
+        </Link>
+      </nav>
+    </>
+  );
 }

apps/nextjs-15/src/app/experiment/exposure-tracker.tsx

@@ -0,0 +1,24 @@
+'use client';
+import { track } from '@vercel/analytics/next';
+import { useEffect } from 'react';
+import styles from './page.module.css';
+
+let tracked = false;
+
+export function ExposureTracker() {
+  useEffect(() => {
+    if (tracked) return;
+    tracked = true;
+    track('exposure');
+  }, []);
+
+  return (
+    <button
+      type="button"
+      className={styles.button}
+      onClick={() => track('click_cta')}
+    >
+      Try it out
+    </button>
+  );
+}

apps/nextjs-15/src/app/experiment/page.module.css

@@ -0,0 +1,113 @@
+.page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100svh;
+  padding: 80px;
+  font-family: var(--font-geist-sans);
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  max-width: 480px;
+  width: 100%;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.badge::before {
+  content: "";
+  display: block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #22c55e;
+}
+
+.main h1 {
+  font-size: 36px;
+  font-weight: 600;
+  letter-spacing: -0.03em;
+  line-height: 1.15;
+  margin: 0;
+}
+
+.description {
+  font-size: 15px;
+  line-height: 1.6;
+  color: rgba(0, 0, 0, 0.5);
+  margin: 0;
+}
+
+.button {
+  align-self: flex-start;
+  appearance: none;
+  background: var(--foreground);
+  color: var(--background);
+  border: none;
+  border-radius: 10px;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .button:hover {
+    opacity: 0.8;
+  }
+}
+
+.back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.4);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.back::before {
+  content: "←";
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .back:hover {
+    color: var(--foreground);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .badge {
+    color: rgba(255, 255, 255, 0.4);
+  }
+
+  .description {
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  .back {
+    color: rgba(255, 255, 255, 0.4);
+  }
+}
+
+@media (max-width: 600px) {
+  .page {
+    padding: 32px;
+    align-items: flex-start;
+    padding-top: 64px;
+  }
+}

apps/nextjs-15/src/app/experiment/page.tsx

@@ -0,0 +1,23 @@
+import Link from 'next/link';
+import { ExposureTracker } from './exposure-tracker';
+import styles from './page.module.css';
+
+export default function ExperimentPage() {
+  return (
+    <div className={styles.page}>
+      <main className={styles.main}>
+        <Link className={styles.back} href="/">
+          Home
+        </Link>
+        <span className={styles.badge}>Experiment</span>
+        <h1>See what we&apos;re testing</h1>
+        <p className={styles.description}>
+          This page is part of an active experiment. Your visit has been
+          recorded as an exposure, and you can interact below to track
+          additional events.
+        </p>
+        <ExposureTracker />
+      </main>
+    </div>
+  );
+}