Next.js客户端layout/page无法用generateMetaData，如何配置SEO内容？

一、处理Metadata #

客户端组件确实无法直接使用generateMetadata或导出metadata对象，可通过以下两种方式解决：

1. 拆分服务端父布局 #

在客户端组件的上级目录创建无'use client'标记的服务端组件layout.js，用这个服务端布局处理全局Metadata，客户端组件作为子组件嵌套其中。

示例目录结构：

app/
├── layout.js  # 服务端组件，无'use client'
└── page.js    # 客户端组件，带'use client'

根layout.js示例代码：

export const metadata = {
  title: '全局站点标题',
  description: '全局站点描述',
  keywords: '关键词1,关键词2'
}

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  )
}

2. 客户端内动态设置（补充方案） #

如果需要在客户端组件内动态调整Metadata，可使用next/head组件（App Router中优先推荐用metadata API，此方法作为补充）：

'use client'
import Head from 'next/head'

export default function ClientPage() {
  return (
    <>
      <Head>
        <title>客户端页面专属标题</title>
        <meta name="description" content="客户端页面专属描述" />
      </Head>
      {/* 页面交互内容 */}
    </>
  )
}

二、生成robots.txt #

在app目录下创建robots.txt.js（服务端组件，不要加'use client'），通过导出函数生成内容：

export default function robots() {
  return {
    rules: [
      {
        userAgent: '*',
        allow: '/',
        disallow: '/private/'
      }
    ],
    sitemap: 'https://你的域名.com/sitemap.xml'
  }
}

三、生成sitemap #

在app目录创建sitemap.xml.js（服务端组件），动态生成站点地图：

// 假设你有获取页面数据的工具函数
import { getAllPages } from '@/lib/page-data'

export default async function sitemap() {
  const pages = await getAllPages()
  const pageEntries = pages.map(page => ({
    url: `https://你的域名.com/${page.slug}`,
    lastModified: page.updateTime
  }))

  return [
    {
      url: 'https://你的域名.com',
      lastModified: new Date()
    },
    ...pageEntries
  ]
}

核心注意事项 #

• 服务端组件默认无需'use client'标记，可正常使用所有SEO相关API。
• 尽量将SEO相关的全局/静态逻辑交给服务端组件处理，客户端组件专注于交互功能，避免丢失SEO能力。

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