nextjs 应用程序路由器中的动态路由和元数据生成

Question

我正在使用应用程序路由器在 nextjs 中构建一个博客网站。我被静态网站生成困住了。我尝试阅读nextjs 的官方文档，但无法理解它......请帮助我。这是我的项目结构。我有一个存储博客数据的文件，即 blogData.js

import { FullStackDeveloper, GraphicDesigner } from "@/assets/team";
    
    const BlogData = [
      {
        id: 0,
        title: "Exploring the Power of React.js for Interactive Web Applications",
        cover: FullStackDeveloper,
        desc: "Delve into the incredible capabilities of React.js for creating dynamic and interactive web applications. Discover how React.js enhances user experience, improves performance, and enables seamless data management. Gain insights into the benefits and best practices of using React.js for your next web development project.",
        keywords: [
          "React.js",
          "interactive web applications",
          "user experience",
          "performance",
          "data management",
          "web development",
          "best practices",
        ],
        date: "23rd Jun 2023",
        url: "exploring-the-power-of-react-js-for-interactive-web-applications",
      },
      {
        id: 1,
        title: "Mastering the Art of Design: Unleashing Creativity and Aesthetics",
        cover: GraphicDesigner,
        desc: "Explore the world of design and discover strategies to unlock your creativity. Learn about the principles of effective design, color theory, typography, and user-centered design. Unleash your artistic potential and create visually stunning experiences.",
        keywords: [
          "design",
          "creativity",
          "aesthetics",
          "color theory",
          "typography",
          "user-centered design",
          "visual experience",
        ],
        data: "25th Jun 2023",
        url: "mastering-the-art-of-design-unleashing-creativity-and-aesthetics",
      },
    ];
    
    export { BlogData };

这是layout.js

export const metadata = {
  title: "dynamic blogs",
  description: "dynamic descriptions",
};
export default function layodut({ children }) {
  return (
    <>
      {children}
    </>
  );
}

这是我的博客 page.js

export default function page({ params }) {
  return (
    <>
      <div className="overflow-hidden bg-white text-black md:py-20">
        <div className="container relative mx-auto px-4">
          <div className="grid grid-cols-1 items-center px-4 py-20 xl:py-10">
            <div>
              <h1 className="relative z-10 text-center text-6xl font-bold xl:text-9xl">
                Welcome to
                <br />
                Our Blog
              </h1>
              <span className="absolute top-0 w-full transform whitespace-nowrap text-center text-[250px] font-extrabold text-gray-400 opacity-30 blur-[1px] ">
                BLOGS
              </span>
              <p className="mx-auto mt-10 text-center text-base xl:w-2/3 xl:text-2xl">
                Explore a wide range of topics on our blog, covering web
                development, design, digital marketing, and technology. Stay
                updated with industry trends, practical tips, and expert
                insights. Discover the latest techniques and technologies in web
                development, get inspired by design trends, learn digital
                marketing strategies, and stay informed about emerging
                technologies. Join our community and empower yourself with
                knowledge and inspiration.
              </p>
            </div>
          </div>
          {/* <h1>id : {}</h1> */}
          <h1>Title : {params.desc}</h1>
        </div>
      </div>
    </>
  );
}

如何让网站根据 blogData.js 的 url 生成标题和描述。我确实尝试了 nextjs 官方文档中的generateStaticParams 函数，但无法达到所需的结果。

Answer 1

在这种情况下，我建议您为每个博客页面使用generateMetaData。

无论如何，您可以像两个页面一样静态定义元数据 - /blogs 和 /blogs/***。

/app/blogs/layout.js

import { Metadata } from 'next';
import * as React from 'react';
export const metadata = {
  title: {
    default: 'dynamic blogs',
    template: `%s - Blog`,
  },
  description: 'dynamic description'
}
....

/app/blogs/[blogTitle]/layout.js

import { Metadata } from 'next';
import * as React from 'react';
export const metadata = {
  title: 'Content',
  description: 'Blog Description'
}
.... 

那么“/blogs/****”路线的标题将为“内容 - 博客”。

您应该在layout.js 文件中定义元数据，而不是page.js。在文档中，我读到这两种情况都可用，但就我而言，只有一侧（布局）有效。

关于代码风格，我想提出一些意见。这种文件结构更适合您的博客网站。

然后应该像 /app/blogs/[id]/layout.js 那样更新layout.js

import { Metadata } from 'next';
import * as React from 'react';
import { BlogData } from '../../blogData.js';     // should update this path

export async function generateMetadata({ params }, parent) {
  const id = params.id;

  const blog = BlogData.find(item => item.id === id);

  return {
    title: blog.title,
    description: blog.description,
    keywords: blog.keywords
  };
}
....

我希望这可以帮助你。