components/Pagination.js

@@ -0,0 +1,36 @@
+import Link from '@/components/Link'
+
+export default function Pagination({ totalPages, currentPage }) {
+  const prevPage = parseInt(currentPage) - 1 > 0
+  const nextPage = parseInt(currentPage) + 1 <= parseInt(totalPages)
+
+  return (
+    <div className="pt-6 pb-8 space-y-2 md:space-y-5">
+      <nav className="flex justify-between">
+        {!prevPage && (
+          <button rel="previous" className="cursor-auto disabled:opacity-50" disabled={!prevPage}>
+            Previous
+          </button>
+        )}
+        {prevPage && (
+          <Link href={currentPage - 1 === 1 ? `/blog/` : `/blog/page/${currentPage - 1}`}>
+            <button rel="previous">Previous</button>
+          </Link>
+        )}
+        <span>
+          {currentPage} of {totalPages}
+        </span>
+        {!nextPage && (
+          <button rel="next" className="cursor-auto disabled:opacity-50" disabled={!nextPage}>
+            Next
+          </button>
+        )}
+        {nextPage && (
+          <Link href={`/blog/page/${currentPage + 1}`}>
+            <button rel="next">Next</button>
+          </Link>
+        )}
+      </nav>
+    </div>
+  )
+}

layouts/ListLayout.js

@@ -2,10 +2,11 @@ import Link from '@/components/Link'
 import Tag from '@/components/Tag'
 import siteMetadata from '@/data/siteMetadata'
 import { useState } from 'react'
+import Pagination from '@/components/Pagination'
 
 const postDateTemplate = { year: 'numeric', month: 'long', day: 'numeric' }
 
-export default function ListLayout({ posts, title }) {
+export default function ListLayout({ posts, title, pagination }) {
   const [searchValue, setSearchValue] = useState('')
   const filteredBlogPosts = posts.filter((frontMatter) => {
     const searchContent = frontMatter.title + frontMatter.summary + frontMatter.tags.join(' ')
@@ -81,6 +82,9 @@ export default function ListLayout({ posts, title }) {
           })}
         </ul>
       </div>
+      {pagination && (
+        <Pagination currentPage={pagination.currentPage} totalPages={pagination.totalPages} />
+      )}
     </>
   )
 }

pages/blog.js

@@ -3,13 +3,20 @@ import siteMetadata from '@/data/siteMetadata'
 import ListLayout from '@/layouts/ListLayout'
 import { PageSeo } from '@/components/SEO'
 
-export async function getStaticProps() {
+export const POSTS_PER_PAGE = 10
-  const posts = await getAllFilesFrontMatter('blog')
 
-  return { props: { posts } }
+export async function getStaticProps() {
+  const getPosts = await getAllFilesFrontMatter('blog')
+  const posts = getPosts.splice(0, POSTS_PER_PAGE)
+  const pagination = {
+    currentPage: 1,
+    totalPages: Math.ceil(getPosts.length / POSTS_PER_PAGE) + 1,
+  }
+
+  return { props: { posts, pagination } }
 }
 
-export default function Blog({ posts }) {
+export default function Blog({ posts, pagination }) {
   return (
     <>
       <PageSeo
@@ -17,7 +24,7 @@ export default function Blog({ posts }) {
         description={siteMetadata.description}
         url={`${siteMetadata.siteUrl}/blog`}
       />
-      <ListLayout posts={posts} title="All Posts" />
+      <ListLayout posts={posts} pagination={pagination} title="All Posts" />
     </>
   )
 }

pages/blog/page/[page].js

@@ -0,0 +1,54 @@
+import { PageSeo } from '@/components/SEO'
+import siteMetadata from '@/data/siteMetadata'
+import { getAllFilesFrontMatter } from '@/lib/mdx'
+import ListLayout from '@/layouts/ListLayout'
+import { POSTS_PER_PAGE } from '../../blog'
+
+export async function getStaticPaths() {
+  const totalPosts = await getAllFilesFrontMatter('blog')
+  const totalPages = Math.ceil(totalPosts.length / POSTS_PER_PAGE)
+  const paths = Array.from({ length: totalPages }, (_, i) => ({
+    params: { page: '' + (i + 1) },
+  }))
+
+  return {
+    paths,
+    fallback: false,
+  }
+}
+
+export async function getStaticProps(context) {
+  const {
+    params: { page },
+  } = context
+  const getPosts = await getAllFilesFrontMatter('blog')
+  const pageNumber = parseInt(page)
+  const postsPerPage = getPosts.slice(
+    POSTS_PER_PAGE * (pageNumber - 1),
+    POSTS_PER_PAGE * pageNumber
+  )
+  const pagination = {
+    currentPage: pageNumber,
+    totalPages: Math.ceil(getPosts.length / POSTS_PER_PAGE),
+  }
+
+  return {
+    props: {
+      postsPerPage,
+      pagination,
+    },
+  }
+}
+
+export default function PostPage({ postsPerPage, pagination }) {
+  return (
+    <>
+      <PageSeo
+        title={siteMetadata.title}
+        description={siteMetadata.description}
+        url={`${siteMetadata.siteUrl}/blog/${pagination.currentPage}`}
+      />
+      <ListLayout posts={postsPerPage} pagination={pagination} title="All Posts" />
+    </>
+  )
+}