Use Next image optimization for docs template covers

apps/docs/next.config.mjs

@@ -1,15 +1,15 @@
+import { fileURLToPath } from "node:url";
 import { createMDX } from "fumadocs-mdx/next";
 
 const withMDX = createMDX();
+const workspaceRoot = fileURLToPath(new URL("../..", import.meta.url));
 
 /** @type {import('next').NextConfig} */
 const config = {
-  // SSG: 全静态导出，交给 Vercel 作为静态 Next.js 文档站托管。
-  output: "export",
-  // Vercel 的 Output Directory 指向 apps/docs/dist。
+  // Keep build artifacts under apps/docs/dist while letting Vercel run the
+  // managed Next.js runtime, including the Image Optimization API.
   distDir: "dist",
-  // SSG 模式下 next/image 默认依赖 server，关掉优化用原图。
-  images: { unoptimized: true },
+  outputFileTracingRoot: workspaceRoot,
   // 让生成的 URL 与 Starlight 的 trailing-slash 行为一致。
   trailingSlash: true,
   reactStrictMode: true,

apps/docs/src/components/template-cover-image.tsx

@@ -0,0 +1,27 @@
+import Image, { type ImageProps } from "next/image";
+
+type TemplateCoverImageProps = Omit<
+  ImageProps,
+  "alt" | "fill" | "height" | "src" | "width"
+> & {
+  src: string;
+  alt?: string;
+  sizes: string;
+};
+
+export function TemplateCoverImage({
+  src,
+  sizes,
+  alt = "",
+  ...props
+}: TemplateCoverImageProps) {
+  return (
+    <Image
+      {...props}
+      alt={alt}
+      fill
+      sizes={sizes}
+      src={src}
+    />
+  );
+}

apps/docs/src/components/template-example-detail.tsx

@@ -20,6 +20,7 @@ import { getTemplateById } from "@/data/templates";
 import { TemplateExamplesNav } from "@/components/template-examples-nav";
 import { CustomTemplateModal } from "@/components/custom-template-modal";
 import { PresetCreateCommandDialog } from "@/components/preset-create-command-dialog";
+import { TemplateCoverImage } from "@/components/template-cover-image";
 import {
   shouldInterceptClick,
   useViewTransitionNavigate,
@@ -138,13 +139,15 @@ export function TemplateExampleDetail({
         </header>
 
         <div
-          className="overflow-hidden rounded-2xl border border-stone-200 bg-stone-100 shadow-[0_1px_2px_rgba(10,10,10,0.04)]"
+          className="relative aspect-[16/10] overflow-hidden rounded-2xl border border-stone-200 bg-stone-100 shadow-[0_1px_2px_rgba(10,10,10,0.04)]"
           style={{ viewTransitionName: `example-card-${example.id}` }}
         >
-          <img
+          <TemplateCoverImage
             src={example.cover}
             alt=""
-            className="aspect-[16/10] w-full object-cover"
+            className="object-cover"
+            priority
+            sizes="(min-width: 1280px) 1152px, calc(100vw - 40px)"
           />
         </div>
 
@@ -257,10 +260,11 @@ function RelatedCard({
       style={{ viewTransitionName: `example-card-${example.id}` }}
     >
       <div className="relative aspect-[16/10] w-full overflow-hidden bg-stone-100">
-        <img
+        <TemplateCoverImage
           src={example.cover}
           alt=""
-          className="size-full object-cover transition group-hover:scale-[1.02]"
+          className="object-cover transition group-hover:scale-[1.02]"
+          sizes="(min-width: 1024px) 370px, (min-width: 640px) 50vw, 100vw"
         />
         <div className="absolute left-3 top-3 inline-flex items-center gap-1.5 rounded-full bg-white/90 px-2.5 py-1 text-xs font-medium text-stone-700 shadow-[0_1px_2px_rgba(10,10,10,0.06)] backdrop-blur">
           <Icon className="size-3.5" />

apps/docs/src/components/template-examples-list.tsx

@@ -17,6 +17,7 @@ import { examples, type Example, type ExampleCategory } from "@/data/examples";
 import { TemplateExamplesNav } from "@/components/template-examples-nav";
 import { CustomTemplateModal } from "@/components/custom-template-modal";
 import { PresetCreateCommandDialog } from "@/components/preset-create-command-dialog";
+import { TemplateCoverImage } from "@/components/template-cover-image";
 import {
   shouldInterceptClick,
   useViewTransitionNavigate,
@@ -253,10 +254,11 @@ function ExampleCard({
       style={{ viewTransitionName: cardTransitionName }}
     >
       <div className="relative aspect-[16/10] w-full overflow-hidden bg-stone-100">
-        <img
+        <TemplateCoverImage
           src={example.cover}
           alt=""
-          className="size-full object-cover transition group-hover:scale-[1.02]"
+          className="object-cover transition group-hover:scale-[1.02]"
+          sizes="(min-width: 1024px) 370px, (min-width: 640px) 50vw, 100vw"
         />
         <div className="absolute left-3 top-3 inline-flex items-center gap-1.5 rounded-full bg-white/90 px-2.5 py-1 text-xs font-medium text-stone-700 shadow-[0_1px_2px_rgba(10,10,10,0.06)] backdrop-blur">
           <Icon className="size-3.5" />

apps/docs/vercel.json

@@ -1,9 +1,8 @@
 {
   "$schema": "https://openapi.vercel.sh/vercel.json",
-  "framework": null,
+  "framework": "nextjs",
   "installCommand": "pnpm install --frozen-lockfile",
   "buildCommand": "pnpm build",
-  "outputDirectory": "dist",
   "headers": [
     {
       "source": "/install.sh",

vercel.json

@@ -1,9 +1,8 @@
 {
   "$schema": "https://openapi.vercel.sh/vercel.json",
-  "framework": null,
+  "framework": "nextjs",
   "installCommand": "pnpm --dir apps/docs install --frozen-lockfile",
   "buildCommand": "pnpm --dir apps/docs build",
-  "outputDirectory": "apps/docs/dist",
   "headers": [
     {
       "source": "/install.sh",