Next.js项目无page.js/layout.js时如何配置Metadata？

你的项目采用的是Next.js Pages Router（旧版路由系统），而layout.js/page.js是App Router（新版路由）的专属文件，所以创建这类文件不会生效，直接用Pages Router的方式配置即可：

全局Metadata（所有页面共用） #

1. 通过_document.js配置（基础全局Meta） #

_document.js负责自定义HTML文档结构，适合配置全局基础Metadata，比如字符编码、视口设置：

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html lang="zh-CN">
        <Head>
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <meta name="description" content="我的Next.js网站" />
          <title>%s - 我的网站</title> {/* 页面标题会自动拼接在%s位置 */}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

2. 通过_app.js配置（全局补充Meta） #

_app.js是所有页面的入口组件，在这里添加的Metadata会作用于所有页面，同时支持页面级Meta覆盖：

import '../Style/global.css'
import Head from 'next/head'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <meta name="author" content="网站作者" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

单页面Metadata（单个页面专属） #

在具体页面文件（比如Page/index.js）中，导入next/head的Head组件，添加该页面独有的Metadata：

import Head from 'next/head'

export default function Home() {
  return (
    <>
      <Head>
        <title>首页 - 我的网站</title>
        <meta name="description" content="这是网站首页的专属描述" />
      </Head>
      <div>首页内容区域</div>
    </>
  )
}

如果后续想切换到App Router，需要重构目录结构将Page目录改为app，并替换_app.js/_document.js为layout.js，但当前场景下直接用Pages Router的配置方式更高效。

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