如何通过 getStaticProps() 在 Next.js 上的 <Head> 中动态设置标题

如何解决如何通过 getStaticProps() 在 Next.js 上的 <Head> 中动态设置标题

我正在为 Next.js 应用程序上的特定帖子预渲染此页面：

import Head from 'next/head';
import Link from 'next/link';
import client from '../../lib/apollo/client'
import POSTS_WITH_SLUGS from '../../lib/queries/allposts'
import POST from '../../lib/queries/post'
import styles from '../../styles/Home.module.css';
import blogStyles from '../../styles/Blog.module.css';

export default function Post({ postData }) {
    const router = useRouter();

    if (!router.isFallback && !postData?.slug) {
        return <p>hmm... looks like an error</p>
    }

    const formatDate = date => {
        const newDate = new Date(date);

        return `${newDate.getDate()}/${
            newDate.getMonth() + 1
        }/${newDate.getFullYear()}`
    };

    return (
        <div className={styles.container}>
            <Head>
                <title>{postData.title}</title>
                <link rel='icon' href='/favicon.ico' />
            </Head>

            <main className={styles.main}>
                {router.isFallback ? (
                    <h2>Loading...</h2>
                ) : (
                    <article className={blogStyles.article}>
                        <div className={blogStyles.postmeta}>
                            <h1 className={styles.title}>{postData.title}</h1>
                            <p>{formatDate(postData.date)}</p>
                            <img src={postData.featuredImage.node.sourceUrl} />
                        </div>
                        <div
                            className='post-content content'
                            dangerouslySetInnerHTML={{ __html: postData.content }}
                        />
                    </article>
                )}
                <p>
                    <Link href={`/blog`}>
                        <a>Back</a>
                    </Link>
                </p>
            </main>
        </div>
    )
}

export async function getStaticPaths() {
    // const allPosts = await getAllPostsWithSlug();

    const { data } = await client.query({
        query: POSTS_WITH_SLUGS
    });

    if (
        data?.posts &&
        data?.posts.edges !== null &&
        data?.posts.edges.node !== null &&
        data?.posts.edges.length > 0
    ) {
        return {
            paths: data?.posts.edges.map(({ node }) => `/blog/${node.slug}`) || [],fallback: true
        }
    }

}


export async function getStaticProps({ params }) {
    const { data } = await client.query({
        query: POST,variables: {
                id: params.slug,idType: 'SLUG'
            }
        });

    return {
      props: {
        postData: data.post
      }
    };
  }

在 npm run dev 上一切正常，但是当我运行 npm run build 时出现此错误：

Error occurred prerendering page "/blog/[slug]". Read more: https://err.sh/next.js/prerender-error
TypeError: Cannot read property 'title' of undefined

我相信错误是由于 Next 中的 <Head> 组件造成的，我试图通过 <title> 动态设置 {postData.title}。我从 getStaticProps() 获取数据作为道具。

我不确定自己犯了什么错误，但我确实想知道是否必须在 <Head> 目录之外创建那个 /pages 组件。任何帮助将不胜感激。谢谢！

解决方法

让我解释一下 Next.js 在初始构建后请求任何其他帖子时如何“回退”。有两个选项可供选择：blocking 和 true。

fallback: blocking（首选）——当对一个尚未生成的页面发出请求时，Next.js 将在第一个请求时对页面进行服务器渲染。未来的请求将从缓存中提供静态文件。
fallback: true – 当对一个尚未生成的页面发出请求时，Next.js 将立即为第一个请求提供加载状态的静态页面提供服务。数据加载完成后，页面将使用新数据重新渲染并缓存。未来的请求将从缓存中提供静态文件。

除非您想提供静态加载 shell，然后在客户端加载您的帖子，否则我会将 true 更改为 blocking。这将解决您的问题！

如何通过 getStaticProps() 在 Next.js 上的 <Head> 中动态设置标题

如何解决如何通过 getStaticProps() 在 Next.js 上的 <Head> 中动态设置标题

解决方法

相关推荐