动态 SSG 页面需要 getStaticPaths，而“/contentslug/[slug]”则缺少 getStaticPaths

Question

我遇到了一个错误，我不知道为什么？在我的页面目录中，我有一个名为 contentslug 的文件夹，其中包含 [slug.js]。

我正在关注本教程 - https://www.youtube.com/watch?v=Mdx3ywlnzk8

这是slug.js中的代码

import Image from  'next/image'
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
  
export default function BlogPosts({ posts}) {

    const {featuredImage, title , information } = posts.fields

    return (
        <div>
        <div>
            <Image
                src={'https:' + featuredImage.fields.file.url}
                width={featuredImage.fields.file.details.image.width}
                height={featuredImage.fields.file.details.image.height}
            />
        </div>
        <div>
            {documentToReactComponents(information)}
        </div>
        </div>
    )
}
  
export async function getStaticProps({params}) {
    const {items} = await client.getEntries({
        content_type: 'posts',
        'fields.slug': params.slug
    })

    return {
        props: {posts: items[0], fallback: 'blocking'}
    }
}

这是链接到它的组件

import Link from 'next/link'

export default function BlogPosts({post }) {
   
   const {title, information, slug, thumbnail} = post.fields
   
   return (
        <div className="container text-center ">
            <div>
                <div>
                    <h4 className=''>{title}</h4>
                    <Link href={'/contentslug/' + slug}>
                        <a className='btn btn-primary text-white'>Read more</a>
                    </Link>
                </div>
            </div>
    )
}
        

有什么想法吗？

Answer 1

如果您正在学习本教程并且您在链接的第 5 集中，那么您不应该编辑 [slug] 页面，它只会发生在第 7 集中 https://www.youtube.com/watch?v=DRF1KBTH15k&list=PL4cUxeGkcC9jClk8wl1yJcN3Zlrr8YSA1&index=7

但如果您已经想处理该页面，则需要添加 getStaticPaths 函数来生成 getStaticProps 将获得的路径：

export const getStaticPaths = async () => {
  const res = await client.getEntries({ 
    content_type: "recipe" 
  })

  const paths = res.items.map(item => {
    return {
      params: { slug: item.fields.slug }
    }
  })

  return {
    paths,
    fallback: false
  }
}