hey, empiezo un tutorial sobre Build and Deploy LA MEJOR aplicación de blog moderna con React | GraphQL, NextJS, Tailwind CSS y me muestra este error, no sé cómo solucionarlo y solo me muestra cuando intento ingresar a la publicación, este es el error:
Error: no se proporcionó un parámetro obligatorio (Slug) como una cadena en getStaticPaths para /post/[Slug]
este es el codigo:
import React from 'react'; import { useRouter } from 'next/router'; import { PostDetail, Categories, PostWidget, Author, Comments, CommentsForm, Loader } from '../../components'; import { getPosts, getPostDetails } from '../../services'; const PostDetails = ({post}) => { console.log({post}); if (router.isFallback) { return <Loader />; } return ( <> <div className="container mx-auto px-10 mb-8"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-12"> <div className="col-span-1 lg:col-span-8"> <PostDetail post={post} /> <Author author={post.author} /> <CommentsForm slug={post.slug} /> <Comments slug={post.slug} /> </div> <div className="col-span-1 lg:col-span-4"> <div className="relative lg:sticky top-8"> <PostWidget slug={String(post.slug)} categories={post.categories.map((category) => String(category.slug))} /> <Categories /> </div> </div> </div> </div> </> ); }; export default PostDetails; export async function getStaticProps({ params }) { const data = await getPostDetails(String(params.slug)); return { props: { post: data, }, }; } export async function getStaticPaths() { const posts = await getPosts(); return { paths: posts.map(({ node: { slug } }) => ({ params: {slug}})), fallback: true, }; }El error está aquí
paths: posts.map(({ node: { slug } }) => ({ params: {slug}})), si usó así, el nombre de su página dinámica debería ser [slug] . Por ejemplo, si su página dinámica es [id].js , debería tener
paths: posts.map(({ node: { slug } }) => ({ params: {id}})),