乐闻世界logo
搜索文章和话题

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

5 个月前提问
21 天前修改
浏览次数226

4个答案

1
2
3
4

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

  1. 引入 Head 组件 在您的页面组件文件中,首先需要从 next/head 引入 Head 组件。
jsx
import Head from 'next/head';
  1. 在页面组件中使用 Head 组件 在您的页面组件的 JSX 中,使用 Head 组件包裹 <title> 标签,并设置您想要的标题。

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

jsx
import Head from 'next/head'; export default function Home() { return ( <> <Head> <title>Home Page</title> </Head> {/* 页面的其他内容 */} </> ); }
  1. 为不同的页面设置不同的标题 对于您的应用中的每个页面,您可以重复上述步骤,为每个页面设置合适的标题。例如,如果您有一个关于页(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 回复

您想要使用该next/head组件:

shell
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

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 回复

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

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

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

2024年6月29日 12:07 回复

你的答案