文档 说明如下：
第三步：迁移 next/head但是pages目录下，next/head React组件用于管理title、meta等HTML元素。在 app 目录中，next/head 被替换为新的内置 SEO 支持。
next/head
组件也能够添加非 SEO 标签。特别是，我想添加
<link rel="...">标签。如果元数据机制似乎不支持链接标签（只是自定义
<meta>标签），如何实现这一点？我不能将标签直接添加到根布局，因为有些标签只应该存在于网站主页上。如果布局知道当前路线但它似乎不适用于 SSG，我可以有条件地将标签添加到根布局。
基于文件的元数据怎么样？
定义文件后，Next.js 将自动提供该文件 （在生产中使用哈希进行缓存）并更新相关的头部 具有正确元数据的元素，例如资产的 URL、文件 类型和图像大小。您必须在应用程序文件夹中添加一个
global.css
文件，...并将其导入到您的布局中。这对我有用。
.redtext { color: red;}
import './foo.css'
export const metadata = {
title: 'mamma mia'
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<div className="redtext">test rosso</div>
<div id="root-container">{children}</div>
</body>
</html>
)
}
layout.tsx
文件中，我像这样放置链接标签：
<html lang="en">
<head>
<link rel="preconnect" href="xyz.com" />
</head>
<body >{children}</body>
</html>
我的链接标签在浏览器中正确显示。这似乎也适用于导出的元数据对象，因此我将其余元数据标签保留为新的推荐格式。
import type { Metadata } from 'next'
如果你去Metadata
界面（在vscode中按“ctrl”并点击“元数据”），它有
archives?: null | string | Array<string>;
/**
* The assets link rel property.
* @example
* ```tsx
* "https://example.com/assets"
* <link rel="assets" href="https://example.com/assets" />
* ```
*/
archives
不仅仅是财产。如果您查看
Metadata界面，您可以找到适合您需要的选项
robots?: null | string | Robots;
//The canonical and alternate URLs for the document.
alternates?: null | AlternateURLs;
icons?: null | IconURL | Array<Icon> | Icons;
<link rel="...">
标签，您只需要按照他们预定义的方式进行操作即可。
https://nextjs.org/docs/app/api-reference/functions/generate-metadata#manifest https://nextjs.org/docs/app/api-reference/functions/generate-metadata#icons
// in your app/page.tsx export metadata
export const metadata = {
manifest: 'https://nextjs.org/manifest.json',
icons: {
icon: '/icon.png',
shortcut: '/shortcut-icon.png',
apple: '/apple-icon.png',
other: {
rel: 'apple-touch-icon-precomposed',
url: '/apple-touch-icon-precomposed.png',
},
},
};
export default function Page() {
... // your code here
}
<link rel="manifest" href="https://nextjs.org/manifest.json" />
<link rel="shortcut icon" href="/shortcut-icon.png" />
<link rel="icon" href="/icon.png" />
<link rel="apple-touch-icon" href="/apple-icon.png" />
<link
rel="apple-touch-icon-precomposed"
href="/apple-touch-icon-precomposed.png"
/>
通过验证