Error: A required parameter (Slug) was not provided as a string in getStaticPaths for /post/[Slug]

Question

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,
  };
}

Answer 1

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}})),