Nextjs 如何设置每个页面的标题？

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

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

jsx
import Head from 'next/head';

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

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

jsx
import Head from 'next/head';

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

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

jsx
import Head from 'next/head';

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

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

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

2024年6月29日 12:07 回复

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

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

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

shell
//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,
  };
}

参考基于配置的元数据

2024年6月29日 12:07 回复

2个答案

你的答案