Hello, I've recently embarked on a tutorial journey to create the ultimate Modern Blog App using React, GraphQL, NextJS, and Tailwind CSS. However, I encountered an error that's giving me some trouble specifically when trying to access a post. Here's the error message:
Error: A required parameter (Slug) was not provided as a string in getStaticPaths for /post/[Slug]
This is the snippet of code causing the issue:
Aspiring coder here! I'm diving into the world of building my own Modern Blog App with React, GraphQL, NextJS, and Tailwind CSS. Everything was going smoothly until I hit a roadblock while attempting to view a post within the app.
Here's the pesky error popping up:</p>
<blockquote>
<p>Error: A necessary parameter (Slug) needs to be provided as a string within the getStaticPaths function for /post/[Slug]</p>
</blockquote>
<p>Take a look at the problematic code snippet below:</p>
<p><div>
<div>
<pre class="lang-js"><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,
};
}