chore: Next.js 15 → 16 (#2503)

app/api/hits/route.ts

@@ -1,11 +1,5 @@
 import { NextResponse } from "next/server";
-import { unstable_cache as cache } from "next/cache";
-import { getViewCounts as _getViewCounts } from "@/lib/views";
-
-const getViewCounts = cache(_getViewCounts, undefined, {
-  revalidate: 300, // 5 minutes
-  tags: ["hits"],
-});
+import { getViewCounts } from "@/lib/views";
 
 export const GET = async (): Promise<
   NextResponse<{

app/feed.atom/route.ts

@@ -1,8 +1,6 @@
 import { NextResponse } from "next/server";
 import { buildFeed } from "@/lib/build-feed";
 
-export const dynamic = "force-static";
-
 export const GET = async () => {
   const feed = await buildFeed();
 

app/feed.xml/route.ts

@@ -1,8 +1,6 @@
 import { NextResponse } from "next/server";
 import { buildFeed } from "@/lib/build-feed";
 
-export const dynamic = "force-static";
-
 export const GET = async () => {
   const feed = await buildFeed();
 

app/notes/[slug]/opengraph-image.tsx

@@ -13,9 +13,6 @@ export const size = {
   height: 630,
 };
 
-// generate and cache these images at build-time for each slug, since doing this on-demand is mega slow...
-export const dynamicParams = false;
-
 export const generateStaticParams = async () => {
   const slugs = await getSlugs();
 

app/notes/[slug]/page.tsx

@@ -1,5 +1,6 @@
 import { env } from "@/lib/env";
 import { Suspense } from "react";
+import { cacheLife } from "next/cache";
 import { JsonLd } from "react-schemaorg";
 import { formatDate, formatDateISO } from "@/lib/date";
 import { CalendarDaysIcon, TagIcon, SquarePenIcon, EyeIcon, MessagesSquareIcon } from "lucide-react";
@@ -16,12 +17,6 @@ import { getCommentCounts } from "@/lib/server/comments";
 import type { Metadata } from "next";
 import type { BlogPosting } from "schema-dts";
 
-// https://nextjs.org/docs/app/api-reference/functions/generate-static-params#disable-rendering-for-unspecified-paths
-export const dynamicParams = false;
-
-// https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering#using-partial-prerendering
-export const experimental_ppr = true;
-
 export const generateStaticParams = async () => {
   const slugs = await getSlugs();
 
@@ -52,10 +47,23 @@ export const generateMetadata = async ({ params }: { params: Promise<{ slug: str
   });
 };
 
+// Cached helper to format dates - needed for Cache Components compatibility
+const getFormattedDates = async (date: string) => {
+  "use cache";
+  cacheLife("max");
+
+  return {
+    dateISO: formatDateISO(date),
+    dateTitle: formatDate(date, "MMM d, y, h:mm a O"),
+    dateDisplay: formatDate(date, "MMMM d, y"),
+  };
+};
+
 const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
   const { slug } = await params;
   const frontmatter = await getFrontMatter(slug);
   const commentCount = await getCommentCounts(`${POSTS_DIR}/${slug}`);
+  const formattedDates = await getFormattedDates(frontmatter!.date);
 
   const { default: MDXContent } = await import(`../../../${POSTS_DIR}/${slug}/index.mdx`);
 
@@ -92,8 +100,8 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
           className={"text-foreground/70 flex flex-nowrap items-center gap-x-2 whitespace-nowrap hover:no-underline"}
         >
           <CalendarDaysIcon className="inline size-4 shrink-0" />
-          <time dateTime={formatDateISO(frontmatter!.date)} title={formatDate(frontmatter!.date, "MMM d, y, h:mm a O")}>
-            {formatDate(frontmatter!.date, "MMMM d, y")}
+          <time dateTime={formattedDates.dateISO} title={formattedDates.dateTitle}>
+            {formattedDates.dateDisplay}
           </time>
         </Link>
 
@@ -133,13 +141,7 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
 
         <div className="flex min-w-14 flex-nowrap items-center gap-x-2 whitespace-nowrap">
           <EyeIcon className="inline size-4 shrink-0" />
-          <Suspense
-            // when this loads, the component will count up from zero to the actual number of hits, so we can simply
-            // show a zero here as a "loading indicator"
-            fallback={<span className="motion-safe:animate-pulse">0</span>}
-          >
-            <ViewCounter slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
-          </Suspense>
+          <ViewCounter slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
         </div>
       </div>
 

app/notes/page.tsx

@@ -1,4 +1,5 @@
 import { env } from "@/lib/env";
+import { cacheLife } from "next/cache";
 import { EyeIcon, MessagesSquareIcon } from "lucide-react";
 import Link from "@/components/link";
 import { getFrontMatter, POSTS_DIR, type FrontMatter } from "@/lib/posts";
@@ -8,26 +9,83 @@ import authorConfig from "@/lib/config/author";
 import { getViewCounts } from "@/lib/views";
 import { getCommentCounts } from "@/lib/server/comments";
 
-export const revalidate = 300; // 5 minutes
-
 export const metadata = createMetadata({
   title: "Notes",
   description: `Recent posts by ${authorConfig.name}.`,
   canonical: `/${POSTS_DIR}`,
 });
 
-const Page = async () => {
-  // parse the year of each post and group them together
+// Hoist number formatter to avoid re-creating on every render
+const numberFormatter = new Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE);
+
+// Non-async component for displaying stats (receives data as props)
+const PostStats = ({ views, comments, slug }: { views: number; comments: number; slug: string }) => {
+  return (
+    <>
+      {views > 0 && (
+        <span className="bg-muted text-foreground/65 inline-flex h-5 flex-nowrap items-center gap-1 rounded-md px-1.5 align-text-top text-xs font-semibold text-nowrap shadow select-none">
+          <EyeIcon className="inline-block size-4 shrink-0" />
+          <span className="inline-block leading-none">{numberFormatter.format(views)}</span>
+        </span>
+      )}
+
+      {comments > 0 && (
+        <Link
+          href={`/${POSTS_DIR}/${slug}#comments`}
+          title={`${numberFormatter.format(comments)} ${comments === 1 ? "comment" : "comments"}`}
+          className="inline-flex hover:no-underline"
+        >
+          <span className="bg-muted text-foreground/65 inline-flex h-5 flex-nowrap items-center gap-1 rounded-md px-1.5 align-text-top text-xs font-semibold text-nowrap shadow select-none">
+            <MessagesSquareIcon className="inline-block size-3 shrink-0" />
+            <span className="inline-block leading-none">{numberFormatter.format(comments)}</span>
+          </span>
+        </Link>
+      )}
+    </>
+  );
+};
+
+// Cached helper to format dates for posts - needed for Cache Components compatibility
+const getFormattedPostDates = async (posts: FrontMatter[]) => {
+  "use cache";
+  cacheLife("max");
+
+  return posts.map((post) => {
+    const year = new Date(post.date).getUTCFullYear();
+    return {
+      ...post,
+      year,
+      dateISO: formatDateISO(post.date),
+      dateTitle: formatDate(post.date, "MMM d, y, h:mm a O"),
+      dateDisplay: formatDate(post.date, "MMM d"),
+    };
+  });
+};
+
+// Async component that fetches all stats once and renders the full page
+const PostsList = async () => {
+  // Fetch posts and stats in parallel (only once per page load)
+  // These functions are cached with "use cache", so they can complete during prerendering
   const [posts, views, comments] = await Promise.all([getFrontMatter(), getViewCounts(), getCommentCounts()]);
 
+  // Format dates in a cached function to avoid date-fns using new Date() during render
+  const formattedPosts = await getFormattedPostDates(posts);
+
   const postsByYear: {
-    [year: string]: (FrontMatter & { views: number; comments: number })[];
+    [year: string]: (FrontMatter & {
+      year: number;
+      dateISO: string;
+      dateTitle: string;
+      dateDisplay: string;
+      views: number;
+      comments: number;
+    })[];
   } = {};
 
-  posts.forEach((post) => {
-    const year = new Date(post.date).getUTCFullYear();
-    (postsByYear[year] || (postsByYear[year] = [])).push({
+  formattedPosts.forEach((post) => {
+    (postsByYear[post.year] || (postsByYear[post.year] = [])).push({
       ...post,
+      // Include pre-fetched stats
       views: views[`${POSTS_DIR}/${post.slug}`] || 0,
       comments: comments[`${POSTS_DIR}/${post.slug}`] || 0,
     });
@@ -42,43 +100,18 @@ const Page = async () => {
           {year}
         </h2>
         <ul className="space-y-4">
-          {posts.map(({ slug, date, title, htmlTitle, views, comments }) => (
+          {posts.map(({ slug, dateISO, dateTitle, dateDisplay, title, htmlTitle, views, comments }) => (
             <li className="flex text-base leading-relaxed" key={slug}>
               <span className="text-muted-foreground w-18 shrink-0 md:w-22">
-                <time dateTime={formatDateISO(date)} title={formatDate(date, "MMM d, y, h:mm a O")}>
-                  {formatDate(date, "MMM d")}
+                <time dateTime={dateISO} title={dateTitle}>
+                  {dateDisplay}
                 </time>
               </span>
               <div className="space-x-2.5">
-                <Link
-                  dynamicOnHover
-                  href={`/${POSTS_DIR}/${slug}`}
-                  dangerouslySetInnerHTML={{ __html: htmlTitle || title }}
-                />
+                {/* htmlTitle is sanitized by rehypeSanitize in lib/posts.ts with strict allowlist: only code, em, strong tags */}
+                <Link href={`/${POSTS_DIR}/${slug}`} dangerouslySetInnerHTML={{ __html: htmlTitle || title }} />
 
-                {views > 0 && (
-                  <span className="bg-muted text-foreground/65 inline-flex h-5 flex-nowrap items-center gap-1 rounded-md px-1.5 align-text-top text-xs font-semibold text-nowrap shadow select-none">
-                    <EyeIcon className="inline-block size-4 shrink-0" />
-                    <span className="inline-block leading-none">
-                      {Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(views)}
-                    </span>
-                  </span>
-                )}
-
-                {comments > 0 && (
-                  <Link
-                    href={`/${POSTS_DIR}/${slug}#comments`}
-                    title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(comments)} ${comments === 1 ? "comment" : "comments"}`}
-                    className="inline-flex hover:no-underline"
-                  >
-                    <span className="bg-muted text-foreground/65 inline-flex h-5 flex-nowrap items-center gap-1 rounded-md px-1.5 align-text-top text-xs font-semibold text-nowrap shadow select-none">
-                      <MessagesSquareIcon className="inline-block size-3 shrink-0" />
-                      <span className="inline-block leading-none">
-                        {Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(comments)}
-                      </span>
-                    </span>
-                  </Link>
-                )}
+                <PostStats slug={slug} views={views} comments={comments} />
               </div>
             </li>
           ))}
@@ -88,9 +121,11 @@ const Page = async () => {
   });
 
   // grouped posts enter this component ordered chronologically -- we want reverse chronological
-  const reversed = sections.reverse();
+  return <>{sections.reverse()}</>;
+};
 
-  return <>{reversed}</>;
+const Page = async () => {
+  return <PostsList />;
 };
 
 export default Page;

app/projects/github.ts

@@ -1,6 +1,7 @@
 import "server-only";
 
 import { env } from "@/lib/env";
+import { cacheLife } from "next/cache";
 import * as cheerio from "cheerio";
 import { graphql } from "@octokit/graphql";
 import type { Repository, User } from "@octokit/graphql-schema";
@@ -12,6 +13,9 @@ export const getContributions = async (): Promise<
     level: number;
   }>
 > => {
+  "use cache";
+  cacheLife("minutes");
+
   // thanks @grubersjoe! :) https://github.com/grubersjoe/github-contributions-api/blob/main/src/scrape.ts
   try {
     const response = await fetch(`https://github.com/users/${env.NEXT_PUBLIC_GITHUB_USERNAME}/contributions`, {
@@ -19,11 +23,6 @@ export const getContributions = async (): Promise<
         referer: `https://github.com/${env.NEXT_PUBLIC_GITHUB_USERNAME}`,
         "x-requested-with": "XMLHttpRequest",
       },
-      cache: "force-cache",
-      next: {
-        revalidate: 900, // 15 minutes
-        tags: ["github-contributions"],
-      },
     });
 
     const $ = cheerio.load(await response.text());
@@ -78,6 +77,9 @@ export const getContributions = async (): Promise<
 };
 
 export const getRepos = async (): Promise<Repository[] | undefined> => {
+  "use cache";
+  cacheLife("minutes");
+
   try {
     // https://docs.github.com/en/graphql/reference/objects#repository
     const { user } = await graphql<{ user: User }>(
@@ -118,20 +120,6 @@ export const getRepos = async (): Promise<Repository[] | undefined> => {
           accept: "application/vnd.github.v3+json",
           authorization: `token ${env.GITHUB_TOKEN}`,
         },
-        request: {
-          // override fetch() to use next's extension to cache the response
-          // https://nextjs.org/docs/app/api-reference/functions/fetch#fetchurl-options
-          fetch: (url: string | URL | Request, options?: RequestInit) => {
-            return fetch(url, {
-              ...options,
-              cache: "force-cache",
-              next: {
-                revalidate: 900, // 15 minutes
-                tags: ["github-repos"],
-              },
-            });
-          },
-        },
       }
     );
 

app/projects/page.tsx

@@ -42,9 +42,13 @@ const Page = async () => {
       </h2>
 
       <Suspense fallback={<p>Failed to generate activity calendar.</p>}>
-        <div className={cn("mx-auto mt-4 mb-8")}>
-          <ActivityCalendar data={contributions} noun="contribution" />
-        </div>
+        {contributions.length > 0 ? (
+          <div className={cn("mx-auto mt-4 mb-8")}>
+            <ActivityCalendar data={contributions} noun="contribution" />
+          </div>
+        ) : (
+          <p className="text-muted-foreground my-4 text-center">Unable to load contribution data at this time.</p>
+        )}
       </Suspense>
 
       <h2 className="my-3.5 text-xl font-medium">
@@ -56,59 +60,65 @@ const Page = async () => {
         </Link>
       </h2>
 
-      <div className="row-auto grid w-full grid-cols-none gap-4 md:grid-cols-2">
-        {repos?.map((repo) => (
-          <div key={repo!.name} className="border-ring/30 h-fit space-y-1.5 rounded-2xl border-1 px-4 py-3 shadow-xs">
-            <Link href={repo!.url} className="inline-block text-base leading-relaxed font-semibold">
-              {repo!.name}
-            </Link>
+      {repos && repos.length > 0 ? (
+        <div className="row-auto grid w-full grid-cols-none gap-4 md:grid-cols-2">
+          {repos.map((repo) => (
+            <div key={repo!.name} className="border-ring/30 h-fit space-y-1.5 rounded-2xl border-1 px-4 py-3 shadow-xs">
+              <Link href={repo!.url} className="inline-block text-base leading-relaxed font-semibold">
+                {repo!.name}
+              </Link>
 
-            {repo!.description && <p className="text-foreground/85 text-sm leading-relaxed">{repo!.description}</p>}
+              {repo!.description && <p className="text-foreground/85 text-sm leading-relaxed">{repo!.description}</p>}
 
-            <div className="flex flex-wrap gap-x-4 text-[0.825rem] leading-loose whitespace-nowrap">
-              {repo!.primaryLanguage && (
-                <div className="text-muted-foreground inline-flex flex-nowrap items-center gap-2">
-                  {repo!.primaryLanguage.color && (
-                    <span
-                      className="inline-block size-4 rounded-full bg-[var(--language-color)]"
-                      style={{ ["--language-color" as string]: repo!.primaryLanguage.color }}
-                    />
-                  )}
-                  <span>{repo!.primaryLanguage.name}</span>
+              <div className="flex flex-wrap gap-x-4 text-[0.825rem] leading-loose whitespace-nowrap">
+                {repo!.primaryLanguage && (
+                  <div className="text-muted-foreground inline-flex flex-nowrap items-center gap-2">
+                    {repo!.primaryLanguage.color && (
+                      <span
+                        className="inline-block size-4 rounded-full bg-[var(--language-color)]"
+                        style={{ ["--language-color" as string]: repo!.primaryLanguage.color }}
+                      />
+                    )}
+                    <span>{repo!.primaryLanguage.name}</span>
+                  </div>
+                )}
+
+                {repo!.stargazerCount > 0 && (
+                  <Link
+                    href={`${repo!.url}/stargazers`}
+                    title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)} ${repo!.stargazerCount === 1 ? "star" : "stars"}`}
+                    className="text-muted-foreground hover:text-primary inline-flex flex-nowrap items-center gap-2 hover:no-underline"
+                  >
+                    <StarIcon className="inline-block size-4 shrink-0" />
+                    <span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)}</span>
+                  </Link>
+                )}
+
+                {repo!.forkCount > 0 && (
+                  <Link
+                    href={`${repo!.url}/network/members`}
+                    title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)} ${repo!.forkCount === 1 ? "fork" : "forks"}`}
+                    className="text-muted-foreground hover:text-primary inline-flex flex-nowrap items-center gap-2 hover:no-underline"
+                  >
+                    <GitForkIcon className="inline-block size-4" />
+                    <span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)}</span>
+                  </Link>
+                )}
+
+                <div className="text-muted-foreground whitespace-nowrap">
+                  <Suspense fallback={<span>Updated recently</span>}>
+                    <span>
+                      Updated <RelativeTime date={repo!.pushedAt} />
+                    </span>
+                  </Suspense>
                 </div>
-              )}
-
-              {repo!.stargazerCount > 0 && (
-                <Link
-                  href={`${repo!.url}/stargazers`}
-                  title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)} ${repo!.stargazerCount === 1 ? "star" : "stars"}`}
-                  className="text-muted-foreground hover:text-primary inline-flex flex-nowrap items-center gap-2 hover:no-underline"
-                >
-                  <StarIcon className="inline-block size-4 shrink-0" />
-                  <span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)}</span>
-                </Link>
-              )}
-
-              {repo!.forkCount > 0 && (
-                <Link
-                  href={`${repo!.url}/network/members`}
-                  title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)} ${repo!.forkCount === 1 ? "fork" : "forks"}`}
-                  className="text-muted-foreground hover:text-primary inline-flex flex-nowrap items-center gap-2 hover:no-underline"
-                >
-                  <GitForkIcon className="inline-block size-4" />
-                  <span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)}</span>
-                </Link>
-              )}
-
-              <div className="text-muted-foreground whitespace-nowrap">
-                <span>
-                  Updated <RelativeTime date={repo!.pushedAt} />
-                </span>
               </div>
             </div>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
+      ) : (
+        <p className="text-muted-foreground my-4 text-center">Unable to load repository data at this time.</p>
+      )}
 
       <p className="mt-6 mb-0 text-center text-base font-medium">
         <Link href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_USERNAME}`} className="hover:no-underline">