如何为Next.js项目中各页面添加不同的Meta标题与描述？

方法一：使用App Router的Metadata API（推荐，利于SEO） #

这种方式在服务器端生成Meta信息，爬虫可直接抓取，是最优方案。

1. 调整页面内容结构，加入Meta字段 #

修改/utils/content/下的每个页面内容文件（比如homeContent.js），将页面内容和Meta信息分开存储：

// /utils/content/homeContent.js
export const homeMeta = {
  '/': {
    title: '首页 - 我的网站',
    description: '这是网站首页的核心介绍，包含我们的服务和优势'
  }
};

export const homeBlocks = {
  '/': [
    // 原有的页面组件配置，示例：
    {
      component: HeroSection,
      componentProps: { className: 'bg-blue-50' },
      content: '欢迎访问我们的网站'
    }
  ]
};

2. 更新content.jsx文件，分别合并Meta和页面组件 #

将Meta信息和页面组件分开管理，避免服务器端导入客户端组件的冲突：

// /utils/content/content.jsx
import { homeMeta, homeBlocks } from './homeContent';
import { aboutMeta, aboutBlocks } from './aboutContent';
import { whoWeAreMeta, whoWeAreBlocks } from './whoWeAreContent';
import { usMeta, usBlocks } from './usContent';

// 合并所有页面的Meta信息
export const pageMeta = {
  ...homeMeta,
  ...aboutMeta,
  ...whoWeAreMeta,
  ...usMeta
};

// 合并所有页面的组件配置
export const pageBlocks = {
  ...homeBlocks,
  ...aboutBlocks,
  ...whoWeAreBlocks,
  ...usBlocks
};

3. 在Catch-All页面中导出generateMetadata函数 #

在app/[...slug]/page.js中添加服务器端的Metadata生成逻辑，同时保留原有的客户端页面渲染代码：

// 服务器端Metadata生成逻辑（必须放在客户端组件代码之前）
import { pageMeta } from '@/utils/content/content';
import { notFound } from 'next/navigation';

export async function generateMetadata({ params }) {
  // 解析当前路径：空slug对应首页，否则拼接成完整路径
  const pathname = params.slug ? `/${params.slug.join('/')}` : '/';
  const pageMetaInfo = pageMeta[pathname];

  if (!pageMetaInfo) {
    notFound();
  }

  return {
    title: pageMetaInfo.title,
    description: pageMetaInfo.description,
    // 可按需添加其他Meta字段，比如keywords、openGraph等
  };
}

// 原有的客户端页面组件
"use client";
import { usePathname } from 'next/navigation';
import { pageBlocks } from '@/utils/content/content';

export default function CatchAll() {
  const pathname = usePathname();
  const blocks = pageBlocks?.[pathname];

  if (!blocks) {
    notFound();
  }

  return (
    <>
      {blocks.map((block, index) => (
        <block.component {...block.componentProps} key={index}>
          {block.content}
        </block.component>
      ))}
    </>
  );
}

方法二：客户端动态设置Meta信息（仅适用于无需SEO的场景） #

如果页面不需要考虑SEO，或者Meta信息需根据客户端状态动态调整，可使用这种方式：

1. 修改页面内容结构，加入Meta字段 #

直接在每个页面的内容对象中添加Meta信息：

// /utils/content/homeContent.js
export const homeContent = {
  '/': {
    meta: {
      title: '首页 - 我的网站',
      description: '首页描述'
    },
    blocks: [
      // 原有的页面组件配置
    ]
  }
};

2. 更新content.jsx合并逻辑 #

保持原有的合并方式，确保每个路径对应包含meta和blocks的对象：

// /utils/content/content.jsx
import { homeContent } from './homeContent';
import { aboutContent } from './aboutContent';
// 其他页面导入

export const pageContent = {
  ...homeContent,
  ...aboutContent,
  // 其他页面内容
};

3. 在客户端组件中动态设置Meta #

使用useEffect在客户端渲染完成后更新页面标题和描述：

"use client";
import { usePathname } from 'next/navigation';
import { useEffect } from 'react';
import { pageContent } from '@/utils/content/content';
import { notFound } from 'next/navigation';

export default function CatchAll() {
  const pathname = usePathname();
  const pageData = pageContent?.[pathname];

  useEffect(() => {
    if (pageData?.meta) {
      // 设置页面标题
      document.title = pageData.meta.title;
      // 设置description Meta标签
      const descElement = document.querySelector('meta[name="description"]');
      if (descElement) {
        descElement.setAttribute('content', pageData.meta.description);
      } else {
        const newDesc = document.createElement('meta');
        newDesc.name = 'description';
        newDesc.content = pageData.meta.description;
        document.head.appendChild(newDesc);
      }
    }
  }, [pathname, pageData]);

  if (!pageData?.blocks) {
    notFound();
  }

  return (
    <>
      {pageData.blocks.map((block, index) => (
        <block.component {...block.componentProps} key={index}>
          {block.content}
        </block.component>
      ))}
    </>
  );
}

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