登录  /  注册
Next.js 应用程序目录的动态元数据配置以匹配状态值
P粉713866425
P粉713866425 2023-12-28 22:59:40
[React讨论组]

在Next.js 13app目录中,我在官方文档中看到他们已经放弃了旧的head方法而转而使用元数据,我认为它只能在页面或布局上使用。

我想根据状态值更改标题,我该怎么做? 元数据中的对象位于组件外部,因此我无法引用它。

import type { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Home',
  description: 'Welcome to Next.js',
};
 
export default function Page() {
  return '...';
}


P粉713866425
P粉713866425

全部回复(1)
P粉025632437

如果您所说的“状态”是指与“useState”类似的东西,那么这是不可能的。因为metadata仅适用于服务器组件,而useState只能在客户端组件中使用。文档: p>

对于普通页面,您通常知道要返回哪些元数据,因此 元数据对象应该足够了。如果页面是动态的,则有 generateMetadata

下面是动态设置标题的示例:

// app/products/[id]/page.tsx

export async function generateMetadata({ params, searchParams }) {
  // read route params
  const id = params.id;

  // fetch data
  const product = await fetch(`/api/products/${id}`).then((res) => res.json());

  // return a dynamic title
  return {
    title: product.title,
  };
}

export default function Page() {
  return '...';
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号