refactor media page to support pagination

components/Pagination.tsx

@@ -1,11 +1,12 @@
 import Link from '@/components/Link'
 
 interface Props {
+  page: string
   totalPages: number
   currentPage: number
 }
 
-export default function Pagination({ totalPages, currentPage }: Props) {
+export default function Pagination({ page, totalPages, currentPage }: Props) {
   const prevPage = currentPage - 1 > 0
   const nextPage = currentPage + 1 <= totalPages
 
@@ -18,7 +19,7 @@ export default function Pagination({ totalPages, currentPage }: Props) {
           </button>
         )}
         {prevPage && (
-          <Link href={currentPage - 1 === 1 ? `/blog/` : `/blog/page/${currentPage - 1}`}>
+          <Link href={currentPage - 1 === 1 ? `/${page}/` : `/${page}/page/${currentPage - 1}`}>
             <button>Previous</button>
           </Link>
         )}
@@ -31,7 +32,7 @@ export default function Pagination({ totalPages, currentPage }: Props) {
           </button>
         )}
         {nextPage && (
-          <Link href={`/blog/page/${currentPage + 1}`}>
+          <Link href={`/${page}/page/${currentPage + 1}`}>
             <button>Next</button>
           </Link>
         )}

layouts/ MediaList.tsx

@@ -0,0 +1,41 @@
+import MediaItem from '@/components/MediaItem'
+import Pagination from '@/components/Pagination'
+import { ComponentProps } from 'react'
+
+interface Props {
+  initialDisplayPosts?: { type: string; title: string; data: string | string[] }[]
+  pagination?: ComponentProps<typeof Pagination>
+}
+const MediaList = ({ initialDisplayPosts = [], pagination }: Props) => {
+  return (
+    <>
+      <div className="divide-y divide-gray-200 dark:divide-gray-700">
+        <div className="space-y-2 pt-6 pb-8 md:space-y-5">
+          <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
+            Media
+          </h1>
+        </div>
+        <div className="container py-12">
+          <div className="flex flex-wrap">
+            {initialDisplayPosts.length ? (
+              initialDisplayPosts.map((d) => (
+                <MediaItem key={d.title} type={d.type} title={d.title} data={d.data} />
+              ))
+            ) : (
+              <p className="pb-2">No media found.</p>
+            )}
+          </div>
+        </div>
+      </div>
+      {pagination && pagination.totalPages > 1 && (
+        <Pagination
+          page="media"
+          currentPage={pagination.currentPage}
+          totalPages={pagination.totalPages}
+        />
+      )}
+    </>
+  )
+}
+
+export default MediaList

layouts/ListLayout.tsx

@@ -90,7 +90,11 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
         </ul>
       </div>
       {pagination && pagination.totalPages > 1 && !searchValue && (
-        <Pagination currentPage={pagination.currentPage} totalPages={pagination.totalPages} />
+        <Pagination
+          page="blog"
+          currentPage={pagination.currentPage}
+          totalPages={pagination.totalPages}
+        />
       )}
     </>
   )

pages/blog.tsx

@@ -15,6 +15,7 @@ export const getStaticProps: GetStaticProps<{
   const posts = await getAllFilesFrontMatter('blog')
   const initialDisplayPosts = posts.slice(0, POSTS_PER_PAGE)
   const pagination = {
+    page: 'blog',
     currentPage: 1,
     totalPages: Math.ceil(posts.length / POSTS_PER_PAGE),
   }

pages/blog/page/[page].tsx

@@ -22,7 +22,7 @@ export const getStaticPaths: GetStaticPaths<{ page: string }> = async () => {
 export const getStaticProps: GetStaticProps<{
   posts: PostFrontMatter[]
   initialDisplayPosts: PostFrontMatter[]
-  pagination: { currentPage: number; totalPages: number }
+  pagination: { page: string; currentPage: number; totalPages: number }
 }> = async (context) => {
   const {
     params: { page },
@@ -34,6 +34,7 @@ export const getStaticProps: GetStaticProps<{
     POSTS_PER_PAGE * pageNumber
   )
   const pagination = {
+    page: 'blog',
     currentPage: pageNumber,
     totalPages: Math.ceil(posts.length / POSTS_PER_PAGE),
   }

pages/media.tsx

@@ -1,30 +1,34 @@
 import siteMetadata from '@/data/siteMetadata'
+import MediaList from '@/layouts/ MediaList'
 import mediaData from '@/data/mediaData'
 import { PageSEO } from '@/components/SEO'
-import MediaItem from '@/components/MediaItem'
+import { GetStaticProps, InferGetStaticPropsType } from 'next'
+import { ComponentProps } from 'react'
 
-export default function Media() {
+export const POSTS_PER_PAGE = 5
+
+export const getStaticProps: GetStaticProps<{
+  initialDisplayPosts: ComponentProps<typeof MediaList>['initialDisplayPosts']
+  pagination: ComponentProps<typeof MediaList>['pagination']
+}> = async () => {
+  const initialDisplayPosts = mediaData.slice(0, POSTS_PER_PAGE)
+  const pagination = {
+    page: 'blog',
+    currentPage: 1,
+    totalPages: Math.ceil(mediaData.length / POSTS_PER_PAGE),
+  }
+
+  return { props: { initialDisplayPosts, pagination } }
+}
+
+export default function Media({
+  initialDisplayPosts,
+  pagination,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <>
       <PageSEO title={`Media - ${siteMetadata.author}`} description={siteMetadata.description} />
-      <div className="divide-y divide-gray-200 dark:divide-gray-700">
-        <div className="space-y-2 pt-6 pb-8 md:space-y-5">
-          <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
-            Media
-          </h1>
-        </div>
-        <div className="container py-12">
-          <div className="flex flex-wrap">
-            {mediaData.length ? (
-              mediaData.map((d) => (
-                <MediaItem key={d.title} type={d.type} title={d.title} data={d.data} />
-              ))
-            ) : (
-              <p className="pb-2">No media found.</p>
-            )}
-          </div>
-        </div>
-      </div>
+      <MediaList initialDisplayPosts={initialDisplayPosts} pagination={pagination} />
     </>
   )
 }

pages/media/page/[page].tsx

@@ -0,0 +1,54 @@
+import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next'
+import siteMetadata from '@/data/siteMetadata'
+import mediaData from '@/data/mediaData'
+import { PageSEO } from '@/components/SEO'
+import MediaList from '@/layouts/ MediaList'
+import { POSTS_PER_PAGE } from '../../media'
+
+export const getStaticPaths: GetStaticPaths<{ page: string }> = async () => {
+  const totalPages = Math.ceil(mediaData.length / POSTS_PER_PAGE)
+  const paths = Array.from({ length: totalPages }, (_, i) => ({
+    params: { page: (i + 1).toString() },
+  }))
+
+  return {
+    paths,
+    fallback: false,
+  }
+}
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  const {
+    params: { page },
+  } = context
+  const pageNumber = parseInt(page as string)
+  const initialDisplayPosts = mediaData.slice(
+    POSTS_PER_PAGE * (pageNumber - 1),
+    POSTS_PER_PAGE * pageNumber
+  )
+
+  const pagination = {
+    page: 'media',
+    currentPage: pageNumber,
+    totalPages: Math.ceil(mediaData.length / POSTS_PER_PAGE),
+  }
+
+  return {
+    props: {
+      initialDisplayPosts,
+      pagination,
+    },
+  }
+}
+
+export default function Media({
+  initialDisplayPosts,
+  pagination,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return (
+    <>
+      <PageSEO title={`Media - ${siteMetadata.author}`} description={siteMetadata.description} />
+      <MediaList initialDisplayPosts={initialDisplayPosts} pagination={pagination} />
+    </>
+  )
+}