第 14 讲｜元数据、OG image、字体、静态资源

// 路径 A：静态导出
export const metadata: Metadata = {
  title: "My Site",
  description: "Welcome",
};

// 路径 B：动态生成
export async function generateMetadata({ params }, parent) {
  const { id } = await params;
  const product = await fetchProduct(id);
  const previous = await parent;
  return {
    title: `${product.name} | ${previous.title?.absolute ?? "Shop"}`,
    description: product.summary,
    openGraph: { images: [product.cover] },
  };
}

// 1. 简单字符串
title: 'My Blog'

// 2. 默认 + 模板
title: { default: 'Dashboard', template: '%s | My Website' }

// 3. 绝对值（不被父 template 包裹）
title: { absolute: 'Custom Title', template: '%s | My Website' }

RootLayout.metadata
    ↓
GroupLayout.metadata
    ↓
PageLayout.metadata（如有）
    ↓
Page.metadata / generateMetadata

export async function generateMetadata({ params }, parent) {
  const previous = await parent;
  return {
    title: `${product.name}`,
    openGraph: {
      ...(await parent).openGraph, // 继承父 OG
      images: [product.cover],
    },
  };
}

export const dynamic = "force-dynamic";
export async function generateMetadata() {
  // 这个函数会在每次请求都重跑
}

export const STATIC_METADATA_IMAGES = {
  icon: {
    filename: 'icon',
    extensions: ['ico', 'jpg', 'jpeg', 'png', 'svg'],
  },
  apple: {
    filename: 'apple-icon',
    extensions: ['jpg', 'jpeg', 'png'],
  },
  favicon: {
    filename: 'favicon',
    extensions: ['ico'],
  },
  openGraph: {
    filename: 'opengraph-image',
    extensions: ['jpg', 'jpeg', 'png', 'gif'],
  },
  twitter: {
    filename: 'twitter-image',
    extensions: ['jpg', 'jpeg', 'png', 'gif'],
  },
} as const

function fastPathCheck(normalizedPath: string): boolean | null {
  // Check favicon.ico first (most common)
  if (FAVICON_REGEX.test(normalizedPath)) return true

  // Check other common static files
  if (ROBOTS_TXT_REGEX.test(normalizedPath)) return true
  if (MANIFEST_JSON_REGEX.test(normalizedPath)) return true
  if (MANIFEST_WEBMANIFEST_REGEX.test(normalizedPath)) return true
  if (SITEMAP_XML_REGEX.test(normalizedPath)) return true

  // Quick negative check - if it doesn't contain any metadata keywords, skip
  if (
    !normalizedPath.includes('robots') &&
    !normalizedPath.includes('manifest') &&
    !normalizedPath.includes('sitemap') &&
    !normalizedPath.includes('icon') &&
    !normalizedPath.includes('apple-icon') &&
    !normalizedPath.includes('opengraph-image') &&
    !normalizedPath.includes('twitter-image') &&
    !normalizedPath.includes('favicon')
  ) {
    return false
  }
  // ...
}

// app/sitemap.ts
import type { MetadataRoute } from "next";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const products = await getProducts();
  return [
    { url: "https://example.com/", lastModified: new Date() },
    ...products.map((p) => ({
      url: `https://example.com/products/${p.id}`,
      lastModified: p.updatedAt,
    })),
  ];
}

// app/products/[id]/opengraph-image.tsx
import { ImageResponse } from "next/og";

export const runtime = "edge";
export const alt = "Product image";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default async function Image({ params }: { params: { id: string } }) {
  const product = await fetchProduct(params.id);

  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          background: "linear-gradient(135deg, #1e3a8a, #7c3aed)",
          color: "white",
          padding: 64,
          fontSize: 64,
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        {product.name}
      </div>
    ),
    { ...size },
  );
}

const interBuffer = await fetch(
  new URL('https://fonts.example.com/Inter.ttf', import.meta.url)
).then((r) => r.arrayBuffer())

return new ImageResponse(
  (...JSX...),
  {
    fonts: [
      {
        name: 'Inter',
        data: interBuffer,
        style: 'normal',
      },
    ],
  }
)

const nextFontGoogleFontLoader: FontLoader = async ({
  functionName,
  data,
  emitFontFile,
  isDev,
  isServer,
}) => {
  const {
    fontFamily,
    weights,
    styles,
    display,
    preload,
    selectedVariableAxes,
    fallback,
    adjustFontFallback,
    variable,
    subsets,
  } = validateGoogleFontFunctionCall(functionName, data[0])

  // Validate and get the font axes required to generated the URL
  const fontAxes = getFontAxes(
    fontFamily,
    weights,
    styles,
    selectedVariableAxes
  )

  // Generate the Google Fonts URL from the font family, axes and display value
  const url = getGoogleFontsUrl(fontFamily, fontAxes, display)

  // Get precalculated fallback font metrics, used to generate the fallback font CSS
  const adjustFontFallbackMetrics: AdjustFontFallback | undefined =

import { Inter, Noto_Sans_SC } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  display: "swap",
});

const notoSansSC = Noto_Sans_SC({
  subsets: ["chinese-simplified"],
  weight: ["400", "700"],
  display: "swap",
});

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN" className={`${inter.variable} ${notoSansSC.variable}`}>
      <body className={notoSansSC.className}>{children}</body>
    </html>
  );
}

import localFont from "next/font/local";

const myFont = localFont({
  src: [
    { path: "./fonts/MyFont-Regular.woff2", weight: "400", style: "normal" },
    { path: "./fonts/MyFont-Bold.woff2", weight: "700", style: "normal" },
  ],
  display: "swap",
});

// app/layout.tsx
import { Inter } from "next/font/google";
import type { Metadata } from "next";

const inter = Inter({ subsets: ["latin"], display: "swap" });

export const metadata: Metadata = {
  metadataBase: new URL("https://shop.example.com"),
  title: { default: "My Shop", template: "%s | My Shop" },
  description: "A modern e-commerce experience",
  openGraph: {
    type: "website",
    locale: "zh_CN",
    siteName: "My Shop",
  },
  twitter: { card: "summary_large_image", creator: "@myshop" },
  robots: { index: true, follow: true },
  verification: { google: "XXXX" },
};

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

// app/products/[id]/page.tsx
import type { Metadata } from "next";

export async function generateMetadata({ params }): Promise<Metadata> {
  const { id } = await params;
  const product = await getProduct(id);

  return {
    title: product.name,
    description: product.summary,
    alternates: { canonical: `/products/${id}` },
    openGraph: {
      title: product.name,
      description: product.summary,
      images: [
        {
          url: `/products/${id}/opengraph-image`, // 来自下面的 .tsx
          width: 1200,
          height: 630,
        },
      ],
    },
  };
}

// app/products/[id]/opengraph-image.tsx
import { ImageResponse } from "next/og";

export const runtime = "edge";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default async function Image({ params }) {
  const product = await getProduct(params.id);
  return new ImageResponse(
    (
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          width: "100%",
          height: "100%",
          background: "#0f172a",
          color: "white",
          fontSize: 64,
        }}
      >
        {product.name}
      </div>
    ),
    { ...size },
  );
}

// app/sitemap.ts
import type { MetadataRoute } from "next";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const products = await getAllProducts();
  return [
    { url: "https://shop.example.com", lastModified: new Date() },
    ...products.map((p) => ({
      url: `https://shop.example.com/products/${p.id}`,
      lastModified: p.updatedAt,
      changeFrequency: "weekly" as const,
    })),
  ];
}

// app/robots.ts
import type { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [{ userAgent: "*", allow: "/", disallow: "/admin/" }],
    sitemap: "https://shop.example.com/sitemap.xml",
  };
}

// 不优雅的写法：两次 fetch
export async function generateMetadata({ params }) {
  const product = await getProduct(params.id)  // 第一次
  return { title: product.name }
}

export default async function Page({ params }) {
  const product = await getProduct(params.id)  // 第二次（其实命中 ① Memoization）
  return <ProductDetail product={product} />
}

const inter = Inter({ variable: "--font-inter" });
// <html className={inter.variable}>

// 然后 styled-component 里 font-family: var(--font-inter), system-ui;

export async function generateSitemaps() {
  return [{ id: 0 }, { id: 1 }]; // 生成 sitemap/0.xml sitemap/1.xml
}

export default async function sitemap({ id }: { id: number }) {
  const start = id * 50000;
  const products = await getProducts({ skip: start, take: 50000 });
  return products.map((p) => ({ url: `...${p.id}` }));
}

cd learning/nextjs-40-lectures/fixtures/lecture-14
pnpm install --ignore-workspace
pnpm dev
# 浏览器打开 http://localhost:3014/