import ReactMarkdown from "react-markdown";

// ...

​

export default function name({ posts }) {

  return (

    <>

      <div>

        <div>

          {posts.Title}

        </div>

      </div>

      <div>

          <ReactMarkdown source={posts.Content} escapeHtml={false} />

      </div>

​

      <Carousel />

    </>

  );

}

​

// Tell nextjs how many pages are there

export async function getStaticPaths() {

  const res = await fetch("http://localhost:1337/blogs");

  const posts = await res.json();

​

  const paths = posts.map((blog) => ({

    params: { id: blog.id.toString() },

  }));

​

  return {

    paths,

    fallback: false,

  };

}

​

// Get data for each individual page

export async function getStaticProps({ params }) {

  const { id } = params;

​

  const res = await fetch(`http://localhost:1337/blogs?id=${id}`);

  const data = await res.json();

  const posts = data[0];

​

  return {

    props: { posts },

  };

}