Next.js中如何将动态修改的页面标题重置为metadata配置值？

当然可以，不用硬编码默认标题，有几种简洁的实现方式：

方案1：复用layout导出的标题变量 #

把layout.tsx里的默认标题单独抽成变量导出，在需要动态修改标题的组件里直接导入使用，这是最可控的方式：

在layout.tsx中修改：

// 单独导出默认标题变量
export const DEFAULT_PAGE_TITLE = "Flow Chat";

export const metadata: Metadata = {
  title: DEFAULT_PAGE_TITLE,
  description: [...],
};

在动态修改标题的组件中：

import { DEFAULT_PAGE_TITLE } from '@/app/layout'; // 路径根据你的项目结构调整

// 根据未读消息数更新标题
const updatePageTitle = (unreadCount: number) => {
  if (unreadCount === 0) {
    document.title = DEFAULT_PAGE_TITLE;
  } else {
    document.title = `${DEFAULT_PAGE_TITLE} - ${unreadCount} unread messages`;
  }
};

// 监听未读消息数变化，自动更新标题
useEffect(() => {
  updatePageTitle(unread_count);
}, [unread_count]);

方案2：获取页面初始标题（无需修改layout） #

组件挂载时，页面的初始标题就是metadata中设置的值，直接保存这个值后续复用即可：

import { useEffect, useState } from 'react';

export default function ChatPage() {
  const [defaultTitle, setDefaultTitle] = useState('');

  // 组件挂载时保存初始标题
  useEffect(() => {
    setDefaultTitle(document.title);
  }, []);

  const updatePageTitle = (unreadCount: number) => {
    document.title = unreadCount === 0
      ? defaultTitle
      : `${defaultTitle} - ${unreadCount} unread messages`;
  };

  useEffect(() => {
    updatePageTitle(unread_count);
  }, [unread_count, defaultTitle]);

  return <div>你的聊天页面内容</div>;
}

方案3：使用Next.js官方的useMetadata钩子（Next.js 13.4+） #

如果你的项目使用的是App Router且版本在13.4以上，可以直接用useMetadata钩子获取全局metadata：

import { useMetadata } from 'next/navigation';
import { useEffect } from 'react';

export default function ChatPage() {
  const metadata = useMetadata();
  // 注意类型断言，确保title是字符串
  const defaultTitle = metadata.title as string;

  const updatePageTitle = (unreadCount: number) => {
    document.title = unreadCount === 0
      ? defaultTitle
      : `${defaultTitle} - ${unreadCount} unread messages`;
  };

  useEffect(() => {
    updatePageTitle(unread_count);
  }, [unread_count, defaultTitle]);

  return <div>你的聊天页面内容</div>;
}

内容的提问来源于stack exchange，提问作者Florian Walther