在导出的静态网站的 NextJS Head 页面中传递动态标题答案

【问题标题】：pass dynamic title in page of NextJS Head in exported static website在导出的静态网站的 NextJS Head 页面中传递动态标题
【发布时间】：2021-09-07 23:12:00
【问题描述】：

我从 API 获取动态标题和日志，并将其传递给 og:title 和 og:image 的 nextJS Head。但它不工作。知道如何使它工作。

这是我的代码。

function PageHead(props: any) {
  let location = "/";
  if (process.browser) {
    location = window.location.href;
  }
  console.log(props);
    
  return (
    <Head>
      <meta property="og:title" content={props.title} />
      <meta property="og:url" content={location} />
      <meta property="og:image" content={props.logo} />
    </Head>
  );
}

const Home: NextPage = () => {
  const [title, setTitle] = useState('');
  const [logo, setLogo] = useState('');
  useEffect(() => {
    (async () => {
      const reviewData = await (await fetch("https://api.")).json();
      setTitle(reviewData.name);
      setLogo(reviewData.logo);
    })();
  }, []);

  return (
    <React.Fragment>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          minHeight: '100vh',
        }}
      >
        <PageHead logo={logo} title={title}/>
       
      </Box>
    </React.Fragment>
  )
}

export default Home

在我导出静态站点或作为开发人员运行之后。当我刷新页面时，在 console.log 中我一个接一个地得到以下 3 个日志。这告诉我它确实从 api 中一一获取徽标和标题并刷新控制台，但由于某种原因，它没有在 HEAD 中填充标题和图像标签。

知道如何解决它。

【问题讨论】：

硬编码title 和logo 是否有效？
是的，它确实有效，它也填充了但不是我通过的那个，出于某种原因
你是否在同一页面的其他组件中使用了 next/head？
不，我想为什么我得到三个控制台，可能是因为每次设置值都会刷新组件。但是由于某种原因它没有刷新Head？
我无法使用您共享的完全相同的代码复制该问题。你能提供一个minimal reproducible example吗？

标签： reactjs next.js

【解决方案1】：

您需要在构建时初始化页面标题以用于 SEO 目的

如果您在客户端呈现应用后获取数据。这对 SEO 已经没有意义了，因为 Search Engine Bot 那时无法读取您的标题。

所以你需要在构建时在服务器上渲染你的Header 组件。

Next.js 为您提供了一些方法来支持您在构建时为所有情况（服务器端渲染、静态站点生成、增量站点重新生成...）获取数据。

这是他们的官方文档：https://nextjs.org/docs/basic-features/data-fetching

这是静态生成我的博客详细信息页面的示例：

export const getStaticProps = async ({ params }) => {
  const response = await fetchAPI(params.slug); // Fetch your data

  // Response 404 page if data is failed to fetch
  if (!response.success) {
     return { notFound: true };
  }

  const { title, description, images } = response;

  return {
     props: {
        pageHeader: {
           title: name,
           metas: [
              {
                 name: 'description',
                 content: description,
              },
              { property: 'og:title', content: name },
              {
                 property: 'og:image',
                 content: images[0] || null,
              },
              {
                 property: 'og:description',
                 content: description,
              },
           ],
        },
        productData: response,
     },
     revalidate: 5 * 60, // re-generate each 5 minutes
  };
};

上面获取的所有数据都将传递给您的Page Component。您可以使用这些数据道具在构建时呈现您的页眉。此标头将包含在您的第一个 HTML 文档中。然后 Search Engine Bot 可以读取并处理它。

import Head from 'next/head';

const BlogDetailPage = (pageProps) => (
   <>
      <Head>
        <title>{pageProps.pageHeader.title}</title>
        {pageProps.pageHeader.metas.map((attributes, index) => (
          <meta {...attributes} key={index} />
        ))}
      </Head>
      <YourPageComponent />
   </>
);

【讨论】：

谢谢，贾斯汀，我可以理解，但我需要它从静态页面的 API 动态加载。这意味着如果 API 中的值发生变化，我不想再次重新生成静态站点，而是自动更新标题。就像它正在为页面的其余部分更新徽标和标题（但对于 Head）所做的那样，由于某种原因它不起作用......
嗨@Developer，我明白了你的意思，我看到<Head> 组件只负责渲染而不是绑定到与你的道具并行更新。因此，根据您的 API 响应更新它。在您的 API 成功响应后，您可以使用 DOM 操作来执行此操作，如下例所示：stackoverflow.com/a/62332670/16633962