Next.js App Router动态路由元数据生成及SSG实现求助

1. 确保generateStaticParams正确返回路由参数 #

在app/blog/[slug]/page.js中，generateStaticParams需要从blogData.js提取所有url字段作为静态生成的路由参数，告诉Next.js要预渲染哪些页面：

import { blogData } from "@/blogData";

export async function generateStaticParams() {
  return blogData.map(post => ({
    slug: post.url
  }));
}

2. 根据slug匹配文章数据并设置页面元数据 #

在同一page.js文件中，通过params获取当前路由的slug，匹配对应文章后，用generateMetadata函数自动设置页面的title和description：

import { blogData } from "@/blogData";

export async function generateStaticParams() {
  return blogData.map(post => ({
    slug: post.url
  }));
}

// 生成页面元数据
export async function generateMetadata({ params }) {
  const post = blogData.find(item => item.url === params.slug);
  
  if (!post) {
    return {
      title: "文章不存在",
      description: "抱歉，你访问的博客文章不存在"
    };
  }

  return {
    title: post.title,
    description: post.description
  };
}

// 渲染页面内容
export default function BlogPostPage({ params }) {
  const post = blogData.find(item => item.url === params.slug);

  if (!post) {
    return <div>文章不存在</div>;
  }

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.description}</p>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

3. 验证静态生成效果 #

执行next build命令后，查看.next/static目录下是否生成了对应slug的静态文件；访问各博客页面，检查浏览器标签title和页面meta description是否正确显示。

常见问题排查 #

• generateStaticParams不生效：确保函数为异步，返回的参数结构正确（每个项是包含slug的对象）。
• 元数据不显示：确认generateMetadata在page.js中正确导出，返回对象包含title和description字段；layout.js的元数据不会覆盖page级别的设置，无需担心冲突。
• 找不到匹配文章：检查blogData的url字段与params.slug是否完全一致（注意大小写、斜杠等细节）。

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