Next.js 14静态导出时generateMetadata重复调用致API 429错误求助

问题根源 #

启用静态导出（next export）时，Next.js会为每个页面单独执行generateMetadata函数，直接导致你的API被多次触发，触发服务端的429限流机制。

解决方案 #

方案1：根布局统一处理元数据 #

把generateMetadata移到app/layout.tsx中，根布局的元数据会被所有子页面继承，这样API只会在构建时被调用一次。

修改后的根布局代码示例：

import type { Metadata } from 'next';

// 用内存缓存API结果，避免重复请求
let cachedPortal: any = null;

export async function generateMetadata(): Promise<Metadata> {
  if (!cachedPortal) {
    const res = await GetPortalTheme();
    cachedPortal = res.data?.portal || {};
  }

  const setting = JSON.parse(cachedPortal.settings || "{}");
  return {
    title: cachedPortal.name || "portal",
    description: "Innovate your out bound call",
    icons: {
      icon: setting.logo?.url,
    },
  };
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

方案2：API层添加缓存逻辑 #

如果必须在多个页面中使用generateMetadata，可以在GetPortalTheme函数里加缓存，确保同一请求只发送一次。

示例：

let cachedThemeResponse: any = null;

export async function GetPortalTheme() {
  if (cachedThemeResponse) {
    return cachedThemeResponse;
  }
  const response = await fetch('你的API地址', {
    // 静态导出时配置缓存策略，构建阶段复用请求结果
    next: { revalidate: 86400 }, // 缓存1天，可按需调整
  });
  cachedThemeResponse = await response.json();
  return cachedThemeResponse;
}

注意事项 #

• 静态导出模式下，generateMetadata在构建阶段执行，缓存逻辑要确保在构建过程中生效。
• 如果API数据会更新，记得设置合理的缓存过期时间，避免元数据长期滞后。

内容的提问来源于stack exchange，提问作者Munyyb Ur Ryhman