使用Next.js App Router，如何在服务端渲染组件中设置页面标题？

在App Router中，静态的metadata对象无法获取动态路由参数或服务端数据，你需要把metadata改成异步生成函数来实现动态标题。具体步骤如下：

修改方案 #

将原来的静态metadata替换为异步的generateMetadata函数，在函数内部调用你的onLoad方法获取文章数据，然后返回包含动态标题的metadata对象。

修改后的完整代码 #

import { redirect } from 'next/navigation';
import type { Metadata } from 'next';

async function onLoad(slug: string): Promise<PostInterface> {
  const res = await API.get(`/posts?slug=${slug}`, {
    headers: {
      // ... 你的请求头配置
    }
  });

  const post = res.data.data.posts[0];
  if (!post) redirect('/404');
  return post;
}

// 异步生成动态metadata
export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const post = await onLoad(params.slug);
  return {
    title: post.title
  };
}

async function Page({ params }: { params: { slug: string } }) {
  const post = await onLoad(params.slug);
  const { title } = post;

  // 这里写你的页面渲染逻辑
  return (
    <article>
      <h1>{title}</h1>
      {/* 文章内容区域 */}
    </article>
  );
}

export default Page;

关键说明 #

1. 异步metadata生成：generateMetadata函数可以接收路由params参数，和Page组件一样获取当前文章的slug，进而请求服务端数据。
2. 请求复用：Next.js会自动缓存API请求结果，所以generateMetadata和Page组件中调用的onLoad不会重复发起请求，不用担心性能问题。
3. 错误处理：原有的redirect逻辑保留在onLoad中，确保文章不存在时自动跳转到404页面，无需额外处理。

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