Next.JS动态元标签

Question

我在 next.js 应用程序中为页面添加了一些动态元标记。

import CoinTossPage from '@/views/CoinTossPage';
import React, { useEffect, useState } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import axios from 'axios';

function CoinTossComponent() {
  const router = useRouter();
  const { id } = router.query;
  const [poolData, setPoolData] = useState(null);

  useEffect(() => {
    if (id) {
      fetchPoolData();
    }
  }, [id]);

  // fetch pool data from API using pool id
  const fetchPoolData = async () => {
    try {
      let config = {
        method: 'get',
        url: `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/gambling/coin-flip/pool/${id}`,
        headers: {
          Authorization: `Bearer ${process.env.NEXT_PUBLIC_API_KEY}`,
        },
      };
      const response = await axios(config);
      if (response.status === 200) {
        const payload = response.data.payload;
        if (payload) {
          setPoolData(payload);
        } else {
          setPoolData(null);
        }
      }
    } catch (error) {
      console.log('ERROR while fetching active pools from API ', error);
    }
  };

  return (
    <>
      <Head>
        <meta property="og:title" content={poolData?.tokenSymbol} />
        <meta property="og:image" content={poolData?.imageUrl} />
      </Head>
      <CoinTossPage />
    </>
  );
}

export default CoinTossComponent;

这就是它的添加方式，这就是我在页面检查中查看它时的显示方式。

它清楚地显示了元标记中的动态内容。但是当我分享页面链接时，该图像没有出现。

问题是什么？

我尝试阅读他们的文档https://nextjs.org/learn/seo/rendering-and-ranking/metadata并根据它添加元标记。

Answer 1

感谢所有帮助我解决上述问题的人。这是更正后的代码

import CoinTossPage from '@/views/CoinTossPage';
import React from 'react';
import Head from 'next/head';
import axios from 'axios';

function CoinTossComponent({poolData}) {
  return (
    <>
      <Head>
        <meta property="og:title" content={poolData?.tokenSymbol} />
        <meta property="og:image" content={poolData?.imageUrl} />
      </Head>
      <CoinTossPage />
    </>
  );
}

export async function getServerSideProps(context) {

  const { id } = context.query; // Access the route parameter

  let config = {
    method: 'get',
    url: `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/gambling/coin-flip/pool/${id}`,
    headers: {
      Authorization: `Bearer ${process.env.NEXT_PUBLIC_API_KEY}`,
    },
  };
  const response = await axios(config);
  const poolData = response.data.payload;

  // Return the data as props
  return {
    props: {
      poolData,
    },
  };
}

export default CoinTossComponent;

Answer 2

在 NextJS 中，HTML 的某些部分在客户端（例如 Google Chrome）上呈现，而其他部分则在前端服务器上呈现。如果元数据使用者看不到您在客户端上看到的元数据，则可能会发生以下情况：

元数据消费者（例如 Twitter）向前端服务器发送请求。
前端服务器返回一些不需要阻塞的起始资源。如果
```
<Head>
```
中的元素需要一些客户端处理，那么前端服务器将不会返回其中的数据，而只会返回一个最小的 HTML，告诉客户端如何继续加载它直到达到预期状态。
元数据消费者读取最少的
```
<Head>
```
。
客户端协调状态并获取填充完整
```
<Head>
```
所需的所有数据。

这个问题可以通过在服务器中获取

<Head>

所需的数据来解决。这可以使用 getStaticProps 或使用 getServerSideProps 来完成。

Next.JS动态元标签

问题描述投票：0回答：2

2个回答

最新问题

Next.JS动态元标签

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2