带有 SSG 的 Next.js 动态元标记未预渲染答案

【问题标题】：Next.js Dynamic Meta Tags with SSG Not Pre-Rendering带有 SSG 的 Next.js 动态元标记未预渲染
【发布时间】：2021-08-27 01:04:32
【问题描述】：

我花了三天的大部分时间来尝试让 Open Graph 图像生成器为我的 Next.js 博客工作。在对达到 50mb 函数大小限制感到沮丧后，我从 API 更改为在我的 pages/blog/[slug].tsx 的 getStaticProps 方法中的函数调用。这是可行的，但现在问题出在元标记上。我使用来自图像生成功能的图像路径以及来自相应帖子的信息动态设置它们。当我查看页面源代码时，我看到了所有适当的标签，并且已经生成了打开的图形图像并且路径有效，但是爬虫程序看不到这些标签。检查源文件后，我意识到没有任何头部标签是预渲染的。我不确定我是否不完全理解 SSG 的作用，因为我认为它会预渲染我的博客页面（包括头部）。这似乎是一个常见的用例，虽然我在 SO 上找到了一些相关的问题，但我还没有找到任何人真正回答它。这是 SSG 限制吗？我看过动态元标记的教程，他们使用 SSR，但似乎没有必要。

// pages/blog/[slug].tsx
...
import Layout from '@/components/Layout';
import getOgImage from '@/utilities/ogImage';

...

export default function Post({ slug, locale, image, post, code }: Props): JSX.Element {
  const metadata = {
    ...
  };

 ...
  return (
    <Layout {...metadata}>
      ...
    </Layout>
  );
}

export const getStaticProps: GetStaticProps = async ({ params, locale }) => {
  ...
  const ogImage = await getOgImage(slug, locale, post.data.title);

  return {
    props: { slug, locale, image: ogImage, post: post.data, code },
  };
};

export const getStaticPaths: GetStaticPaths = async ({ locales }) => {
  ...

  return {
    paths,
    fallback: false,
  };
};

// Layout.tsx
...
import Meta from '@/components/Meta';

export default function Layout({ children, ...rest }: Props): JSX.Element {
  return (
    <>
      <Meta {...rest} />
      <Wrapper>
        <Header />
        <Content>{children}</Content>
      </Wrapper>
    </>
  );
}

// Meta.tsx
import Head from 'next/head';
import { useRouter } from 'next/router';

...

const Meta: React.FC<Props> = ({
  locale,
  title,
  image,
  description,
  author,
  published,
  modified,
  section,
  tags,
}: Props) => {
  const router = useRouter();
  const url = SITE_URL + router.asPath;
  const ogType = router.pathname === '/' ? 'website' : 'article';

  return (
    <Head>
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:creator" content={TWITTER_USERNAME} />
      <meta property="og:url" content={url} />
      <meta property="og:type" content={ogType} />
      <meta property="og:site_name" content={SITE_NAME} />
      <meta property="og:locale" content={locale} />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} key="ogDescription" />
      <meta property="og:image" content={image} key="ogImage" />
    </Head>
  );
};

【问题讨论】：

您能展示一下Meta 组件的道具吗？另外，您能否向<Head> 显示一些您设置为儿童的标签？您对 SSG 的假设是正确的，乍一看您的代码似乎没有任何问题。
我添加了编辑帖子并添加了道具和打开的图形标签。

标签： next.js

【解决方案1】：

感谢任何查看我的问题的人。我想到了！我实现暗模式的方式是在整个应用程序上使用条件渲染来防止任何初始闪烁。我已经改变了我做黑暗模式的方式，现在一切正常！

【讨论】：