Next.js服务端如何在组件外获取URL参数配置metadata

在Next.js的App Router中，你可以通过generateMetadata异步函数实现需求——这个函数运行在服务端，能直接获取URL查询参数，用于动态生成页面的metadata。

具体代码实现如下：

import type { Metadata } from 'next'

// 服务端执行的函数，获取查询参数并生成metadata
export async function generateMetadata({
  searchParams,
}: {
  searchParams: { search?: string }
}): Promise<Metadata> {
  // 处理参数默认值，避免undefined
  const searchTerm = searchParams.search || '未指定搜索内容'
  return {
    openGraph: {
      description: `这是针对「${searchTerm}」的搜索结果`
    }
  }
}

export default function Page({
  searchParams,
}: {
  searchParams: { search?: string }
}) {
  return <div>搜索内容：{searchParams.search}</div>
}

关键说明 #

• generateMetadata是App Router专属API，专门用于动态生成页面元数据，全程在服务端运行，不会暴露到客户端。
• 函数参数中直接包含searchParams，对应URL中的查询参数（比如?search=foo会解析成{ search: "foo" }）。
• 若你仍在使用Pages Router，可通过getServerSideProps获取查询参数，再结合next/head组件设置元数据，但App Router的方案更简洁规范。

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