动态 SSG 页面需要 getStaticPaths,但“/contentslug/[slug]”缺少
getStaticPaths is required for dynamic SSG pages and is missing for '/contentslug/[slug]'
我 运行 遇到了一个错误,我不确定为什么?在我的页面目录中,我有一个名为 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>
)
}
有什么想法吗?
如果您正在学习本教程并且您正在观看您链接的第 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
}
}
我 运行 遇到了一个错误,我不确定为什么?在我的页面目录中,我有一个名为 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>
)
}
有什么想法吗?
如果您正在学习本教程并且您正在观看您链接的第 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
}
}