[id].js

import Footer from '../../components/Footer';
import axios from 'axios';
import { getAuthor, getFeaturedImage } from '../../lib/utils';
import { POSTS_API_URL } from '../../lib/constants';

export default function Post({ title, featuredImg, author, content, date }) {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen">

    </div>
  );
}

// This function gets called at build time
export async function getStaticPaths() {
  
  const res = await axios.get(POSTS_API_URL);
  const posts = res.data;
  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));
  // We'll pre-render only these paths at build time.
  return { paths, fallback: false };
}
// This also gets called at build time
export async function getStaticProps({ params }) {
  const res = await axios.get(`${POSTS_API_URL}/${params.id}`);
  const post = await res.data;
  const featuredImg = await getFeaturedImage(post.featured_media);
  const author = await getAuthor(post.author);
  return {
    props: { title: post.title.rendered, content: post.content.rendered, featuredImg, author, date: post.date },
  };
}