Next.js 13中如何修改默认的Create Next App页面标题？

Next.js 13的路由机制和旧版本有区别，next/head在新的App Router模式下不再生效，分两种场景给你解决方案：

场景1：用App Router（Next.js 13默认新建项目模式） #

这种模式下要通过Metadata来设置标题，有两种方式：

静态全局设置 #

在app/layout.js（或app/layout.tsx）里导出metadata对象，全局替换默认标题：

export const metadata = {
  title: "你的自定义网站标题",
  description: "可选：添加网站描述内容",
};

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

改完重启开发服务器，标题就会更新。

动态页面设置 #

如果需要根据页面内容生成动态标题，在对应页面的page.js文件里导出generateMetadata函数：

export async function generateMetadata({ params }) {
  // 这里可以根据params或接口数据动态生成标题
  return {
    title: `详情页 - ${params.id}`,
  };
}

export default function DetailPage({ params }) {
  return <div>页面内容</div>;
}

场景2：用Pages Router（传统路由模式） #

如果你的项目根目录有pages文件夹，属于旧的Pages Router模式，直接用next/head就行，注意要在全局或页面中正确引入：

全局统一设置 #

在pages/_app.js（或pages/_app.tsx）里添加全局标题：

import Head from 'next/head';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>全局自定义标题</title>
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

单个页面单独设置 #

在具体页面文件（比如pages/index.js）里单独设置：

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>首页专属标题</title>
      </Head>
      <div>首页内容</div>
    </>
  );
}

额外注意点 #

• 修改后一定要重启开发服务器，缓存可能导致修改不生效
• 检查是否有其他地方的标题设置覆盖了你的配置
• 确认自己的项目是App Router还是Pages Router，Next.js13新建项目默认是App Router（有app文件夹）

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