时间戳

首页 > 解决方案 > 如何在 next.js 部分创建动态标题？

javascript - 如何在 next.js 部分创建动态标题？

问题描述

我有一个功能齐全的网站，但头部部分没有检索特定页面<title>和<meta description>.

例如，如果我在关于页面上，标题标签为“关于我”，我希望在<title>标签中呈现“关于我”。我基本上需要的是在我的 Head 组件中加载由实际标题和描述组成的道具、变量或类似的东西。我已经阅读了官方文档中的一些示例，但是没有使用动态数据更新头部的示例。

这是我的组件的当前代码：

import React from 'react';
import NextHead from 'next/head';

const Head = ({ title, description }) => (
    <NextHead>
        <meta charSet="UTF-8" />
        <title>My Website{title}</title>
        <meta name="description" content={description || ''} />
        <meta name="viewport" content="width=device-width, initial-scale=1" key="viewport" />
    </NextHead>
);

我为帖子和页面创建了一个 Layout.js 组件。我之前描述的<Head>是在布局组件中导入的。

import React from 'react';
import Head from '../components/Head';


export default ({ children, as, settings = {}, title="default text" }) => (
    <main>
        <Head>
            <title>{title}</title>
        </Head>
        <div className="app__container">
            <div className="row">{children}</div>
        </div>
    </main>
);

我希望，例如，当我在/work/great-client时，我会看到一个带有great-client的更新<title>标签

标签： javascriptreactjsnext.js

解决方案

它应该是：

import React from 'react';
import Head from '../components/Head';

export default ({ children, as, settings = {}, title="default text" }) => (
    <main>
        <Head title={title}>
        <div className="app__container">
            <div className="row">{children}</div>
        </div>
    </main>
);

如果要将其用作 Head 的子级，则必须修改 Head 组件：

import React from 'react';
import NextHead from 'next/head';

const Head = ({ title, description, children }) => (
    <NextHead>
        <meta charSet="UTF-8" />
        {children}
        <meta name="description" content={description || ''} />
        <meta name="viewport" content="width=device-width, initial-scale=1" key="viewport" />
    </NextHead>
);

推荐阅读