react-next. 配置title信息

最新推荐文章于 2024-05-10 09:39:23 发布

郭俊强

最新推荐文章于 2024-05-10 09:39:23 发布

阅读量598

点赞数 8

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_37061571/article/details/135054413

版权

文章讲述了在Next.js应用中如何使用静态和动态方法处理文档元数据，包括导入`Metadata`和`ResolvingMetadata`类型，以及如何根据路由参数和API请求动态生成`openGraph`信息。

摘要由CSDN通过智能技术生成

文档：元数据

1、静态数据

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

2、动态数据

import type { Metadata, ResolvingMetadata } from 'next'
 
type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const id = params.id
 
  // fetch data
  const product = await fetch(`https://.../${id}`).then((res) => res.json())
 
  // optionally access and extend (rather than replace) parent metadata
  const previousImages = (await parent).openGraph?.images || []
 
  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}
 
export default function Page({ params, searchParams }: Props) {}