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

components/code-block.tsx

@@ -1,26 +1,36 @@
-import { codeToHtml } from "shiki";
-import reactToText from "react-to-text";
 import { CodeIcon, TerminalIcon } from "lucide-react";
+import { cacheLife } from "next/cache";
 import CopyButton from "@/components/copy-button";
 import { cn } from "@/lib/utils";
+import reactToText from "react-to-text";
+import { codeToHtml } from "shiki";
 
-const CodeBlock = async ({
-  showLineNumbers = false,
-  showCopyButton = true,
-  className,
-  children,
-  ...rest
-}: React.ComponentProps<"pre"> & {
+interface CodeBlockProps extends React.ComponentProps<"pre"> {
   showLineNumbers?: boolean;
   showCopyButton?: boolean;
-}) => {
+}
+
+const renderHighlightedCode = async (codeString: string, lang: string) => {
+  "use cache";
+  cacheLife("max");
+
+  const html = await codeToHtml(codeString, {
+    lang,
+    themes: {
+      light: "github-light",
+      dark: "github-dark",
+    },
+  });
+
+  return html;
+};
+
+const CodeBlock = async (props: CodeBlockProps) => {
+  const { showLineNumbers = false, showCopyButton = true, children, className } = props;
+
   // escape hatch if this code wasn't meant to be highlighted
   if (!children || typeof children !== "object" || !("props" in children)) {
-    return (
-      <pre className={className} {...rest}>
-        {children}
-      </pre>
-    );
+    return <pre {...props}>{children}</pre>;
   }
 
   const codeProps = children.props as React.ComponentProps<"code">;
@@ -29,13 +39,7 @@ const CodeBlock = async ({
   // the language set in the markdown is passed as a className
   const lang = codeProps.className?.split("language-")[1] ?? "";
 
-  const codeHighlighted = await codeToHtml(codeString, {
-    lang,
-    themes: {
-      light: "github-light",
-      dark: "github-dark",
-    },
-  });
+  const html = await renderHighlightedCode(codeString, lang);
 
   return (
     <div className={cn("bg-muted/35 relative isolate rounded-lg border-2 font-mono shadow", className)}>
@@ -47,11 +51,11 @@ const CodeBlock = async ({
         )}
         data-language={lang || undefined}
         data-line-numbers={showLineNumbers || undefined}
-        dangerouslySetInnerHTML={{ __html: codeHighlighted }}
+        dangerouslySetInnerHTML={{ __html: html }}
       />
       {lang && (
         <span className="[&_svg]:stroke-primary/90 text-foreground/75 bg-muted/40 absolute top-0 left-0 z-10 flex items-center gap-[8px] rounded-tl-md rounded-br-lg border-r-2 border-b-2 px-[10px] py-[5px] font-mono text-xs font-medium tracking-wide uppercase backdrop-blur-sm select-none [&_svg]:size-[14px] [&_svg]:shrink-0">
-          {["sh", "bash", "zsh"].includes(lang) ? (
+          {["sh", "bash", "zsh", "shell"].includes(lang) ? (
             <>
               <TerminalIcon />
               <span>Shell</span>