Next.js 14 初学者入门指南（下）

随着现代Web应用的发展，用户界面变得越来越复杂，同时用户对应用的响应速度和互动性有着更高的期待。在这样的背景下，Next.js 作为一个前沿的React框架，提供了一系列高级功能来满足开发者的需求，今天我们来介绍 Next.js 14 的第二部分。

推荐阅读

‍‍Next.js 14 初学者入门指南 （上）‍‍

Metadata：在Next.js项目中优化SEO

在当今这个信息爆炸的时代，拥有一个高可见度的网站已成为许多企业和个人的追求。搜索引擎优化（SEO）是实现这一目标的重要手段。为了让你的Next.js应用更好地被搜索引擎发现，Next.js引入了一个非常实用的功能——元数据API。通过这个API，你可以为每个页面定义元数据，确保当你的页面被分享或索引时显示准确、相关的信息。

1. 静态元数据的配置

静态元数据是指在构建时确定的有关页面的信息，并且在运行时不会改变。这些元数据与特定页面相关联，可以包括标题和描述等数据。例如，如果你有一个关于页面，你可以这样配置它的静态元数据：

//src/app/about/page.tsx

export const metadata = {
  title: "关于我",
};

export default function About() {
  return <h1>关于我</h1>;
}

通过这种方式，当你的“关于我”页面被搜索引擎索引或被分享到社交媒体时，其标题会正确地显示为“关于我”。

2. 动态生成的元数据

与静态元数据不同，动态元数据允许你根据运行时的动态数据或条件生成页面的元数据。这对于那些内容经常变化或依赖于用户输入的页面非常有用。比如，你有一个展示产品详情的页面，可以这样配置其元数据：

import { Metadata } from "next";

type Props = {
  params: {
     productId: string;
  };
};

export const generateMetadata = ({ params }: Props ): Metadata => {
  return {
      title: `产品 ${params.productId} 的详情`,
  };
};

export default function ProductDetails({ params }: Props) {
    return <h1>产品 {params.productId} 的详情</h1>;
}

甚至，你可以使用异步函数来生成元数据，这在你需要从数据库或API获取数据时特别有用：

export const generateMetadata = async ({ params }: Props): Promise<Metadata> => {
    const title = await new Promise((resolve) => {
      setTimeout(() => {
        resolve(`产品 ${params.productId}`);
      }, 100);
  });
  return { title: `产品 ${title} 的详情`, };
};

3、元数据规则

• layout.tsx 和 page.tsx 文件都可以导出元数据。如果在布局中定义，则适用于该布局中的所有页面；如果在页面中定义，则仅适用于该页面。

• 元数据按顺序读取，从根级别到最终页