具有理智的 Next.js 未构建博客页面答案

【问题标题】：Next.js with Sanity not building Blog pages具有理智的 Next.js 未构建博客页面
【发布时间】：2021-07-02 21:42:23
【问题描述】：

我正在将 Sanity 与 Next.Js 进行首次集成，尝试将博客添加到个人网站。开发工作正常，但是当我去部署或构建时，我收到一个错误，它找不到博客页面的道具之一。

抛出的错误是这样的：

TypeError: 无法读取未定义的属性“标题”

这是我用于 [slug].js 文件的内容：

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import Head from 'next/head';
import { useRouter } from 'next/router';
import Layout from '../../components/layout';
import Scrollbar from 'react-scrollbars-custom';

import Transitions from '../../lib/transitions';

import BlockContent from '@sanity/block-content-to-react';

import { postQuery, postSlugsQuery } from '../../lib/grocQueries';
import { getClient, overlayDrafts, sanityClient } from '../../lib/sanity.server';
import { urlForImage, usePreviewSubscription } from '../../lib/sanity';

const pageVariants = Transitions.pageVariant;
const pageTransition = Transitions.pageTransition;

export const Post = ({ data = {}, preview }) => {
    const router = useRouter();

    const slug = data?.post?.slug;
    const {
        data: { post, morePosts },
    } = usePreviewSubscription(postQuery, {
        params: { slug },
        initialData: data,
        enabled: preview && slug,
    });

    return (
        <Layout>
            <motion.article className='blog-article' initial='initial' animate='in' exit='out' variants={pageVariants} transition={pageTransition}>
                <Scrollbar style={{ width: '100%', height: '100%' }}>
                    <figure className='hero-container'>
                        <h1 className='blog-title'>{post.title} </h1>
                        {post.mainImage && <img className='blog-hero' alt='Some alt Text' src={urlForImage(post.mainImage).url()} />}
                    </figure>

                    <div className='copy-block'>
                        <BlockContent blocks={post.body} imageOptions={{ w: 860, fit: 'max' }} {...sanityClient.config()} />
                    </div>
                </Scrollbar>
            </motion.article>
        </Layout>
    );
};


export async function getStaticProps({ params, preview = false }) {
    const { post, morePosts } = await getClient(preview).fetch(postQuery, {
        slug: params.slug,
    });

    return {
        props: {
            preview,
            data: {
                post,
                morePosts: overlayDrafts(morePosts),
            },
        },
    };
}
export async function getStaticPaths() {
    const paths = await sanityClient.fetch(postSlugsQuery);
    return {
        paths: paths.map((slug) => ({ params: { slug } })),
        fallback: true,
    };
}

export default Post;

【问题讨论】：

标签： reactjs next.js sanity

【解决方案1】：

<figure className='hero-container'>
                        <h1 className='blog-title'>{post?.title} </h1>
                        {post?.mainImage && <img className='blog-hero' alt='Some alt Text' src={urlForImage(post?.mainImage).url()} />}
                    </figure>

在构建期间，接下来不知道发布对象及其键，因此最好进行可选链接。

【讨论】：

这最终帮助我完成了构建过程。感谢您的帮助。

【解决方案2】：

有两件事可能要在静态生成的页面中添加一个，这样它就知道如果没有任何道具该做什么。

在页面中添加 props 签入，这样就不会构建失败。

if (!props) return null // or !data in your case.

在 getStaticProps 中添加 notFound 返回道具，以便它知道如何正确处理 404。

   return {
        notFound: true,
        revalidate: 300,
    }

【讨论】：