hey I start a tutorial on Build and Deploy THE BEST Modern Blog App with React | GraphQL, NextJS, Tailwind CSS and it shows me this error I don't know how to fix it and it shows me only when I try to enter post this is the error :
Error: A required parameter (Slug) was not provided as a string in getStaticPaths for /post/[Slug]
this is the code :
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,
};
}Error is here
paths: posts.map(({ node: { slug } }) => ({ params: {slug}})),
if you used like this, your dynamic page name should me [slug]. For example if your dynamic page is [id].js you should have
paths: posts.map(({ node: { slug } }) => ({ params: {id}})),