使用App Router的Next.js应用如何通过第三方API生成动态页面标题？

一、generateMetadata 与 API 调用的处理方案 #

generateMetadata 是运行在服务器端的元数据生成函数，不能调用客户端 React 钩子（比如依赖 useEffect/useState 的自定义 useApi 钩子），原因是服务器组件不支持客户端钩子的运行环境。

解决思路是把 API 逻辑抽成独立的纯函数，而非钩子，这样既能在 generateMetadata 里直接调用，也能在客户端组件中复用：

1. 抽离 API 调用逻辑：

// lib/api.js
export async function fetchApiData(endpoint) {
  const response = await fetch(`https://第三方API域名/${endpoint}`, {
    // 可添加请求头、缓存配置等
    next: { revalidate: 3600 } // 可选：配置缓存策略
  });
  
  if (!response.ok) {
    throw new Error(`请求失败: ${response.status}`);
  }
  
  return response.json();
}

2. 在 generateMetadata 中调用：

// app/[id]/page.js
import { fetchApiData } from '@/lib/api';

export async function generateMetadata({ params }) {
  const data = await fetchApiData(`items/${params.id}`);
  return {
    title: data.itemName,
    description: data.itemDesc
  };
}

// 页面组件（服务器组件）也可复用同一函数
export default async function ItemPage({ params }) {
  const data = await fetchApiData(`items/${params.id}`);
  return <div>{data.content}</div>;
}

如果需要在客户端组件中实现数据刷新等交互，可以基于这个纯函数封装客户端钩子：

// hooks/useApi.js
import { useState, useEffect } from 'react';
import { fetchApiData } from '@/lib/api';

export function useApi(endpoint) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const loadData = async () => {
      try {
        const res = await fetchApiData(endpoint);
        setData(res);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    loadData();
  }, [endpoint]);

  return { data, loading, error };
}

这样就能在客户端组件中使用 useApi，同时服务器端的 generateMetadata 用纯函数获取数据，逻辑完全复用。

二、useState 放在组件函数外部的问题 #

完全不可行。组件外部的变量属于全局作用域，所有该组件的实例会共享这个变量的值——比如你在页面A修改了这个“状态”，页面B的同一组件也会同步变化，导致状态混乱，完全不符合 React 组件的隔离特性。

正确的做法：

• 组件内部状态：将 useState 声明在组件函数内部，确保每个组件实例拥有独立的状态。
• 跨组件共享状态：使用 Zustand、Redux 这类状态管理工具，或者结合 Server Components + React Query（客户端）来管理全局数据。

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