Dynamic Route in NEXTjs with sanity not working

Question

I checked my code many times , also compared with people who have done the same project but i m still not able to undersatnd where my code is breaking down. There is no error as as byt even renderng using dynamic routes i get a 404 Here is my node

[slug].js

import { GetStaticProps } from "next";
import Navbar from "../../components/Navbar";
import { sanityClient, urlFor } from "../../sanity";
import { Post } from "../../typing";

interface Props {
  post: Post;
}

function Post({ post }: Props) {
  console.log(post);
  return (
    <div>
      <Navbar></Navbar>
    </div>
  );
}

export default Post;
export const getStaticPaths = async () => {
  const query = `*[_type == "post"]{
          _id,
          slug{
            current,
          }
        }`;

  const posts = await sanityClient.fetch(query);

  const paths =
    posts.map((post: Post) => ({
      params: {
        slug: post.slug.current,
      },
    })) || [];

  return {
    paths,
    // fallback: true,
  };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const query = `*[_type == "post" && slug.current == $slug][0]{
          _id,
          _createdAt,
          title,
          author-> {
              name,
              image
          },
          description,
          mainImage,
          slug,
          body
      }`;
  const post = await sanityClient.fetch(query, { slug: params?.slug });

  if (!post) {
    return {
      notFound: true,
    };
  }
  return {
    props: {
      post,
    },
    revalidate: 60,
  };
};

Folder Structure enter image description here

Sanity.js

import { createCurrentUserHook, createClient} from "next-sanity";
import createImageUrlBuilder from "@sanity/image-url";

const config = {
    dataset : process.env.NEXT_PUBLIC_SANITY_DATASET || "production",
    projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
    apiVersion: "2021-03-25",
    useCdn: process.env.NODE_ENV === "production"    
}

export const sanityClient= createClient(config);

export const urlFor = (source) => createImageUrlBuilder(config).image(source);

// export const useCurrentUser= createCurrentUserHook(config);

I have tried everything, please help!!! Here is the github link ---- https://github.com/manaskshatriya/Next_Sanity_tutorial_Blog

Dynamic Route in NEXTjs with sanity not working

0 Answers0