如何在Next.js中调整Head标签优先级，让页面标签置于_app.js标签上方

Pages Router 场景（Next.js 12 及更早版本，或 13+ 保留 _pages 目录） #

无需修改任意页面组件代码，直接调整 _app.js 的代码结构即可：
将全局 Head 组件移到页面组件渲染节点 <Component {...pageProps} /> 的后方：

// _app.js
import Head from 'next/head'

function MyApp({ Component, pageProps }) {
  return (
    <>
      {/* 优先渲染页面组件，页面内自定义的 Head 标签会先被收集 */}
      <Component {...pageProps} />
      {/* 全局 Head 放在页面组件之后，全局标签会自动排在页面自定义标签后方 */}
      <Head>
        {/* 原有全局头部配置，比如公共 meta、favicon、视口设置等 */}
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
    </>
  )
}

export default MyApp

原理是next/head会按照组件的渲染顺序收集头部标签，先渲染的组件内的标签会排在最终输出的头部更靠前的位置。

App Router 场景（Next.js 13+ 使用 app 目录） #

该版本路由默认已经符合优先级要求：
根layout.js内定义的全局metadata或者Head标签，默认会排在页面page.js内定义的页面级头部标签后方，相同属性的标签页面级配置会自动覆盖全局配置，无需额外调整。

内容的提问来源于stack exchange，提问作者Sarang Sami