如何在 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