Next.js 13 App Router 中动态 SEO 元数据管理指南

// app/items/[itemid]/page.tsx 或 app/items/[itemid]/layout.tsx

import type { Metadata } from "next";
import { doc, getDoc } from "firebase/firestore"; // 假设使用Firebase Firestore
import { db } from "@/lib/firebase"; // 假设你的Firebase实例已配置

interface ItemData {
  title: string;
  description: string;
  keywords?: string;
  // ...其他数据
}

// 模拟数据获取函数，实际应用中会从数据库或API获取
async function getItemDetails(itemId: string): Promise<ItemData | null> {
  try {
    const docRef = doc(db, "items", itemId);
    const docSnap = await getDoc(docRef);

    if (docSnap.exists()) {
      return docSnap.data() as ItemData;
    } else {
      console.log("No such document!");
      return null;
    }
  } catch (error) {
    console.error("Error fetching item details:", error);
    return null;
  }
}

// generateMetadata 函数，用于生成动态元数据
export async function generateMetadata({
  params,
}: {
  params: { itemid: string };
}): Promise<Metadata> {
  const itemid = params.itemid;
  const data = await getItemDetails(itemid);

  if (!data) {
    // 如果数据不存在，可以返回一个默认的元数据，或者重定向/显示404
    return {
      title: "页面未找到 - Next.js 应用",
      description: "您访问的页面不存在或已被移除。",
    };
  }

  return {
    title: data.title,
    description: data.description,
    keywords: data.keywords || "Next.js, 动态内容, SEO",
    // 可以添加更多元数据，例如og:image, twitter:card等
    openGraph: {
      title: data.title,
      description: data.description,
      // images: [`/some-image-url/${itemid}.jpg`],
    },
    twitter: {
      card: "summary_large_image",
      title: data.title,
      description: data.description,
      // images: [`/some-image-url/${itemid}.jpg`],
    },
  };
}

// 页面组件本身
export default function DetailPage({ params: { itemid } }: { params: { itemid: string } }) {
  // 页面组件内部的数据获取可以与generateMetadata分开，
  // 也可以在generateMetadata中获取数据后，将数据通过某种方式传递给页面组件（例如，如果页面也是一个服务器组件）
  // 但为了SEO，元数据必须在generateMetadata中定义。
  // 此处仅为示例，页面内容可能需要再次获取数据或通过props传递
  return (
    <section>
      <h1>{itemid} 详情页</h1>
      <p>这里是页面的主要内容，通常会显示从服务器获取的`datas`内容。</p>
      {/* 页面内容渲染，例如：
      {datas && (
        <>
          <h2>{datas.title}</h2>
          <p>{datas.description}</p>
        </>
      )}
      */}
    </section>
  );
}