react-next. 配置title信息

文档:元数据

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 paramsconst id = params.id// fetch dataconst product = await fetch(`https://.../${id}`).then((res) => res.json())// optionally access and extend (rather than replace) parent metadataconst previousImages = (await parent).openGraph?.images || []return {title: product.title,openGraph: {images: ['/some-specific-page-image.jpg', ...previousImages],},}
}export default function Page({ params, searchParams }: Props) {}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/229951.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣190. 颠倒二进制位

位运算 思路&#xff1a; 逐位颠倒&#xff0c;第 i 位二进制移动到 (31 - i) 位上 result | (n & 1) << (31 - i); class Solution { public:uint32_t reverseBits(uint32_t n) {uint32_t result 0;for (int i 0; i < 32 && n > 0; i) {result | (…

实验记录:深度学习模型收敛速度慢有哪些原因

深度学习模型收敛速度慢有哪些原因&#xff1f; 学习率设置不当&#xff1a; 学习率是算法中一个重要的超参数&#xff0c;它控制模型参数在每次迭代中的更新幅度。如果学习率过大&#xff0c;可能会导致模型在训练过程中的振荡&#xff0c;进而影响到收敛速度&#xff1b;如果…

【Windows】windows11右键默认显示更多选项的办法

Windows11系统的右键菜单显示&#xff0c;需要多点一次“显示更多选项”才能看到所有菜单内容&#xff0c;按下面步骤简单设置一下就能恢复成Windows经典的右键菜单显示。 1. 2.输入命令【reg.exe add "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a…

React与AJAX

大家好&#xff0c;欢迎来到 《React与AJAX》 课程。在这一课中&#xff0c;我们将学习如何在 React 中使用 AJAX。 什么是 AJAX&#xff1f; AJAX&#xff08;Asynchronous JavaScript and XML&#xff09;是一种使用 JavaScript 在浏览器和服务器之间进行异步通信的技术。A…

Redis - RDB与AOF持久化技术

Redis 持久化技术 RDB 是默认持久化方式&#xff0c;但 Redis 允许 RDB 与 AOF 两种持久化技术同时 开启&#xff0c;此时系统会使用 AOF 方式做持久化&#xff0c;即 AOF 持久化技术的优先级要更高。同样的道 理&#xff0c;两种技术同时开启状态下&#xff0c;系…

css的元素显示模式(有单行文字垂直居中,侧边栏等案例)

目录 1. 什么是元素的显示模式 2. 元素显示模式的类型 块元素 行内元素 行内块元素 3. 元素显示模式的转换 4.文字垂直居中 5.具体实现案例 1. 什么是元素的显示模式 定义&#xff1a;元素显示模式就是元素&#xff08;标签&#xff09;以什么方式进行显示&#xff0c;…

Mysql 压测

目录 1、mysql查看数据大小 2、mysql配置优化 3、mysql压力测试 4、mysql主从复制原理 5、mysql主从延迟如何解决 6、主从切换操作 1、mysql查看数据大小 怎样查询总数据量 SELECT table_schema AS Database,CONCAT(ROUND(SUM((data_length index_length) / (1024 * 102…

HarmonyOS鸿蒙应用开发——数据持久化Preferences封装

文章目录 数据持久化简述基本使用与封装测试用例参考 数据持久化简述 数据持久化就是将内存数据通过文件或者数据库的方式保存到设备中。HarmonyOS提供两两种持久化方案&#xff1a; Preferences&#xff1a;主要用于保存一些配置信息&#xff0c;是通过文本的形式存储的&…

TCP/IP详解——FTP 协议,Telnet协议

文章目录 1. FTP 协议1.1 FTP的应用1.2 FTP传输文件的过程1.3 FTP传输模式1.4 主动模式&#xff08;Active Mode&#xff09;1.5 Active Mode 抓包分析1.6 被动模式&#xff08;Passive Mode&#xff09;1.7 Passive Mode 抓包分析 2. Telnet 协议2.1 Telnet 概念2.2 Telnet 协…

【网络安全】网络防护之旅 - Java安全机制探秘与数字证书引爆网络防线

&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《网络安全之道 | 数字征程》⏰墨香寄清辞&#xff1a;千里传信如电光&#xff0c;密码奥妙似仙方。 挑战黑暗剑拔弩张&#xff0c;网络战场誓守长。 目录 &#x1f608;1. 初识网络安…

android tv no ad desktop

1. TV xiaomi tv, too many ad and boring destktop. 小米电视去广告及更换第三方桌面操作方法 – MIUI历史版本 2. com.yanggqi.rom.launcher.free.apk. 3. ADB : 注意&#xff0c; adb connect 192.168.0.50 ,无法认证时&#xff0c;要把电视界面返回到上一级才能看到那个…

Web前端-CSS(文本样式)

文章目录 1.font字体1.1 font-size:大小1.2 font-family:字体1.3 font-weight:字体粗细1.4 font-style:字体风格1.5 font总结 2. css外观属性2.1 color:文本颜色2.2 text-align:文本水平对齐方式2.3 line-height:行间距2.4 text-indent:首行缩进2.5 text-decoration 文本的装饰…

挑战52天学小猪佩奇笔记--day25

52天学完小猪佩奇--day25 ​【本文说明】 本文内容来源于对B站UP 脑洞部长 的系列视频 挑战52天背完小猪佩奇----day25 的视频内容总结&#xff0c;方便复习。强烈建议大家去关注一波UP&#xff0c;配合UP视频学习。 注&#xff1a;这集开始变成一段一段的猜台词&#xff0c;加…

代码随想Day39 | 62.不同路径、63. 不同路径 II

62.不同路径 每次向右或者向下走两个选择&#xff0c;定义dp数组dp[i][j] 为到达索引ij的路径和&#xff0c;状态转移公式为 dp[i][j]dp[i-1][j]dp[i][j-1]&#xff0c;初始状态的第一行和第一列为1&#xff0c;从左上到右下开始遍历即可。详细代码如下&#xff1a; class Sol…

git push origin master

1、在github上面新建一个仓库&#xff0c;仓库名称就是项目总的名称&#xff0c;里面不要放置任何东西&#xff0c;包括README.md&#xff0c;然后复制仓库的地址 2、在本地项目名称下面的文件夹里面点击鼠标右键&#xff0c;然后点击Git Bash Here 3、使用git init去把这个目…

03 Vue3中的生命周期函数

概述 The Vue component lifecycle events happen during a component’s lifecycle, from creation to deletion. They allow us to add callbacks and side effects at each stage of the component’s life when necessary. Vue 组件生命周期事件发生在组件从创建到删除的…

跟着官网学 Vue - 透传 Attributes

MyButton.vue 这是子组件&#xff0c;它是一个包含按钮的简单组件。它有一个按钮&#xff0c;当按钮被点击时&#xff0c;会触发 handleClick 方法。MyButton 组件中禁用了属性继承&#xff0c;以避免多次触发点击事件。 <!-- MyButton.vue --> <template><!-…

LeetCode day26

LeetCode day26 LCR 189. 设计机械累加器 请设计一个机械累加器&#xff0c;计算从 1、2… 一直累加到目标数值 target 的总和。注意这是一个只能进行加法操作的程序&#xff0c;不具备乘除、if-else、switch-case、for 循环、while 循环&#xff0c;及条件判断语句等高级功能…

Java并发(十九)----Monitor原理及Synchronized原理

1、Java 对象头 以 32 位虚拟机为例 普通对象 |--------------------------------------------------------------| | Object Header (64 bits) | |------------------------------------|-------------------------| | Mark W…

MySQL 报错 You can‘t specify target table for update in FROM clause解决办法

You can’t specify target table for update in FROM clause 其含义是&#xff1a;不能在同一表中查询的数据作为同一表的更新数 单独执行复合查询是正常的&#xff0c;如下&#xff1a; 但是当执行子查询删除命令时&#xff0c;报如下错误 DELETE FROM abpusers WHERE Id I…