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

Question

我有一个功能齐全的网站，但头部部分没有检索特定于页面的<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时，我会看到一个更新的<title>标签和great-client

Answer 1

我发现这个解决方案有点简单，代码行也更少。

_app.js：

  export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>{Component.title}</title>        
      </Head>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  );
}

主页.js：

Home.title = 'Homepage';
export default function Home() {
  return (
    <>
      /* Some code */
    </>
  );
}

Answer 2

它应该是：

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>
);

Answer 3

在尝试了第二个示例之后，我得到了它的工作。

下面的代码中有更多解释。

下面的示例代码显示了包含共享组件<Layout>的 Post.js。 在布局中，我添加并添加了{props.meta.title} 。 现在可以检索页面/帖子特定的动态标题标签。

const Post = props => {
    const {
        content,
        meta: { title },
    } = props;


    return (
        <Layout>
            <Head>
                <title>{props.meta.title}</title>
            </Head>
            <div className="post">
                <div className="content-inner">
                        <h1>{title}</h1>
                    <article dangerouslySetInnerHTML={{ __html: content }} />
                </div>
            </div>
        </Layout>
    );
};

Post.getInitialProps = function(reqOrContext) {
    const { slug } = reqOrContext.query;
    let content = require(`../work/${slug}.md`);
    const converter = new Converter({ metadata: true });
    content = converter.makeHtml(content);
    const meta = converter.getMetadata();
    return { content, meta };
};

export default withRouter(Post);

Answer 4

创建布局组件
从道具中解构孩子

添加到标题 {children.type.name}

 console.log(children); return ( <> <Head> <title>{children.type.name.toLowerCase()}</title> </Head> <div className="layout">{children}</div> </> ); };

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

问题描述

4 个解决方案

解决方案1
7 2021-09-14 12:16:13

解决方案2
1 2019-09-28 00:17:08

解决方案3
0 2019-09-29 11:09:26

解决方案4
0 2022-05-06 09:24:04

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

问题描述

4 个解决方案

解决方案1 7 2021-09-14 12:16:13

解决方案2 1 2019-09-28 00:17:08

解决方案3 0 2019-09-29 11:09:26

解决方案4 0 2022-05-06 09:24:04

解决方案1
7 2021-09-14 12:16:13

解决方案2
1 2019-09-28 00:17:08

解决方案3
0 2019-09-29 11:09:26

解决方案4
0 2022-05-06 09:24:04