NextJS Pages目录项目如何设置网站标题？

你当前使用的是Pages Router（基于src/pages目录），App Router的metadata导出方案并不适用，需要使用Pages Router专属的标题设置方式，以下是几种常用方案：

1. 单个页面单独设置标题 #

在src/pages下的单个页面组件中，导入next/head的Head组件，直接在组件内设置页面标题：

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>首页 - 我的网站</title>
      </Head>
      {/* 页面内容 */}
    </>
  );
}

2. 全局默认标题 + 页面自定义覆盖 #

如果需要设置全局默认标题，同时允许单个页面自定义标题，可以在_app.page.tsx中统一处理：

首先在_app.page.tsx中配置全局逻辑：

import Head from 'next/head';
import type { AppProps } from 'next/app';

// 给组件扩展title属性类型（TypeScript可选）
type PageComponent = AppProps['Component'] & {
  title?: string;
};

export default function MyApp({ Component, pageProps }: AppProps) {
  const pageTitle = (Component as PageComponent).title || '我的网站 - 默认标题';

  return (
    <>
      <Head>
        <title>{pageTitle}</title>
      </Head>
      <Component {...pageProps} />
    </>
  );
}

然后在单个页面组件中定义静态title属性，即可自动覆盖全局默认值：

export default function About() {
  return (
    <>
      {/* 页面内容 */}
    </>
  );
}

// 自定义页面标题
About.title = '关于我们 - 我的网站';

3. 全局基础配置（配合页面自定义使用） #

如果需要给所有页面添加统一的标题后缀（比如“- 我的网站”），或设置全局元数据，可以在_document.page.tsx中配置，但注意这里的Head只会渲染一次，动态标题仍需通过页面或_app中的Head设置：

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

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <meta name="description" content="我的网站全局描述" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

注意事项 #

• Pages Router不支持App Router的metadata导出机制，必须使用next/head组件实现标题控制
• 多个层级的Head组件中，页面内的title会覆盖全局（_app或_document）设置的title

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