import { NextPage } from "next"
import Page from "../../layouts/main"
import postsLoader from "../../data/loaders/PostsLoader"
import BlogPost from "../../models/BlogPost"
import EntryPreviews from "../../components/EntryPreviews"

interface Props {
  posts: BlogPost[]
}

const PostPage: NextPage<Props> = props => {
  const { posts } = props
  return (
    <Page>
      <EntryPreviews entries={posts} />
    </Page>
  )
}

interface StaticProps {
  props: Props
}

export async function unstable_getStaticProps(): Promise<StaticProps> {
  const posts = await postsLoader.getPosts()

  return {
    props: {
      posts,
    },
  }
}

export default PostPage

import { NextPage } from "next"
import Page from "../../layouts/main"
import postsLoader from "../../data/loaders/PostsLoader"
import BlogPost from "../../models/BlogPost"
import BlogPostPreview from "../../components/BlogPostPreview"

interface Props {
  posts: BlogPost[]
}

const PostPage: NextPage<Props> = props => {
  const { posts } = props
  return (
    <Page>
      {posts.map(post => {
        return <BlogPostPreview post={post} key={post.slug} />
      })}
    </Page>
  )
}

interface StaticProps {
  props: Props
}

export async function unstable_getStaticProps(): Promise<StaticProps> {
  const posts = await postsLoader.getPosts()

  return {
    props: {
      posts,
    },
  }
}

export default PostPage

--- 
+++ 
@@ -2,7 +2,7 @@
 import Page from "../../layouts/main"
 import postsLoader from "../../data/loaders/PostsLoader"
 import BlogPost from "../../models/BlogPost"
-import BlogPostPreview from "../../components/BlogPostPreview"
+import EntryPreviews from "../../components/EntryPreviews"
 
 interface Props {
   posts: BlogPost[]
@@ -12,9 +12,7 @@
   const { posts } = props
   return (
     <Page>
-      {posts.map(post => {
-        return <BlogPostPreview post={post} key={post.slug} />
-      })}
+      <EntryPreviews entries={posts} />
     </Page>
   )
 }
Update /posts to use `EntryPreviews`
