在 Next.js 中设置每个页面的标题，您可以使用 `next/head` 模块来包含 HTML 的 `<head>` 部分内容，包括页面标题 `<title>` 标签。以下是如何为 Next.js 应用中的每个页面设置特定标题的步骤：

1. 引入 Head 组件
在您的页面组件文件中，首先需要从 `next/head` 引入 `Head` 组件。

```jsx
import Head from 'next/head';
```

2. 在页面组件中使用 Head 组件
在您的页面组件的 JSX 中，使用 `Head` 组件包裹 `<title>` 标签，并设置您想要的标题。

例如，如果您想为首页设置标题为 "Home Page"，您可以这样做：

```jsx
import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>Home Page</title>
      </Head>
      {/* 页面的其他内容 */}
    </>
  );
}
```

3. 为不同的页面设置不同的标题
对于您的应用中的每个页面，您可以重复上述步骤，为每个页面设置合适的标题。例如，如果您有一个关于页（about.js），可以设置标题为 "About Us"：

```jsx
import Head from 'next/head';

export default function About() {
  return (
    <>
      <Head>
        <title>About Us</title>
      </Head>
      {/* 关于页面的内容 */}
    </>
  );
}
```

这样每个页面都有个性化的标题，有利于用户体验和SEO优化。当页面被渲染时，浏览器标签上会显示相应的标题。

确保每个页面组件都包含对 `Head` 组件的使用，以确保所有页面都有明确的标题。如果您的应用具有动态页面或路由参数，您也可以根据页面内容或参数动态地设置标题。

您想要使用该`next/head`组件：

    import Head from 'next/head'
    
    export default () =>
      <div>
        <Head>
          <title>My page title</title>
          <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        </Head>
    
        <p>Hello world!</p>
      </div>
    

请参阅文档： https: [//nextjs.org/docs/api-reference/next/head](https://nextjs.org/docs/api-reference/next/head)

_**在 NextJs v13 中 | v14 使用应用程序目录，**_您不必`'next/head'`再使用该组件。您需要做的只是定义一个导出的对象，无论是`layout.js`静态_**地**_`page.js`保留标题，如下例所示：

    export const metadata = {
      title: "Create Next App",
      description: "Generated by create next app",
    };
    

或者，如果您需要**动态**标题，您可以使用该`generateMetadata`函数来实现您需要的功能，如下例所示：

    //in this example I use the generateMetadata function to generate a multi languages title.
    
    export async function generateMetadata({ params: { lng } }) {
    
      const myTitle = lng === "en" ? "Hi" : "مرحبا";
    
      return {
        title: myTitle,
      };
    }
    

参考[基于配置的元数据](https://nextjs.org/docs/app/api-reference/functions/generate-metadata)

当您需要比服务器页面渲染更强大的功能`generateMetadata()`或`export const metadata: Metadata` 优化服务器页面渲染时**，**您可以使用这种简单但不太干净的方法......

    export default async function Page({params}: Props) {
       const extractedData = await extractData()
       const title = getTitle(params,extractedData);
       ...
       return <>
          <title>{title}</title>
          ...
         </>
      }
    

_使用这个......直到出现更好的底层架构。_

How to set documents title per page in nextjs?

4个答案

你的答案