Next.js 13动态Head使用：动态页面如何修改标题与描述？

在Next.js 13的App Router中，next/head已被弃用，直接导入使用不会生效。针对带路由参数的动态页面，推荐以下两种解决方案：

方案一：使用Metadata API（推荐，SEO友好） #

通过服务器端执行的generateMetadata函数动态生成页面元数据，这是Next.js 13官方推荐的方式，支持静态和动态页面，元数据会在服务器端渲染完成后注入到Head中，对搜索引擎友好。

代码示例 #

import { doc, getDoc } from "firebase/firestore";
import db from "../path/to/your/firebase/config";

// 服务器端动态生成元数据
export async function generateMetadata({ params }) {
  const { itemid } = params;
  const docRef = doc(db, "items", itemid);
  const docSnap = await getDoc(docRef);
  const datas = docSnap.data();

  return {
    title: datas?.title || "默认标题",
    description: datas?.desc || "默认描述",
    keywords: "some contents",
    viewport: "initial-scale=1.0, width=device-width"
  };
}

export default function DetailPage({ params: { itemid } }) {
  // 服务器组件直接获取页面数据（无需useState/useEffect）
  const getData = async () => {
    const docRef = doc(db, "items", itemid);
    const docSnap = await getDoc(docRef);
    return docSnap.data();
  };

  const datas = await getData();

  return (
    <section>
      {/* 页面内容 */}
    </section>
  );
}

说明 #

• generateMetadata是Next.js提供的专用函数，会在页面渲染前执行，接收params和searchParams参数，可直接异步获取数据。
• 即使页面是客户端组件（添加'use client'指令），generateMetadata依然会在服务器端运行，不影响元数据的生成。

方案二：客户端直接操作DOM（仅适用于客户端交互场景） #

如果需要在客户端动态修改元数据（比如用户交互后），可以直接操作DOM，但这种方式对SEO不友好，因为搜索引擎可能不会执行客户端JS。

代码示例 #

'use client';

import { useEffect, useState } from 'react';
import { doc, getDoc } from "firebase/firestore";
import db from "../path/to/your/firebase/config";

export default function DetailPage({ params: { itemid } }) {
  const [datas, setDatas] = useState({});

  const getData = async () => {
    const docRef = doc(db, "items", itemid);
    const docSnap = await getDoc(docRef);
    setDatas(docSnap.data());
  };

  useEffect(() => {
    if (Object.keys(datas).length === 0) {
      getData();
    } else {
      // 动态修改标题
      document.title = datas.title || "默认标题";
      // 动态修改描述元标签
      const descMeta = document.querySelector('meta[name="description"]');
      if (descMeta) {
        descMeta.content = datas.desc || "默认描述";
      }
    }
  }, [datas]);

  return (
    <section>
      {/* 页面内容 */}
    </section>
  );
}

内容的提问来源于stack exchange，提问作者Mohammed Bekele