tailwind-nextjs-blog/pages/blog/page/[page].tsx
2022-10-17 15:37:01 +00:00

70 lines
1.8 KiB
TypeScript

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';
import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
import { PostFrontMatter } from 'types/PostFrontMatter';
export const getStaticPaths: GetStaticPaths<{ page: string }> = async () => {
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).toString() },
}));
return {
paths,
fallback: false,
};
};
export const getStaticProps: GetStaticProps<{
posts: PostFrontMatter[];
initialDisplayPosts: PostFrontMatter[];
pagination: { currentPage: number; totalPages: number };
}> = async (context) => {
const {
params: { page },
} = context;
const posts = await getAllFilesFrontMatter('blog');
const pageNumber = parseInt(page as string);
const initialDisplayPosts = posts.slice(
POSTS_PER_PAGE * (pageNumber - 1),
POSTS_PER_PAGE * pageNumber
);
const pagination = {
currentPage: pageNumber,
totalPages: Math.ceil(posts.length / POSTS_PER_PAGE),
};
return {
props: {
posts,
initialDisplayPosts,
pagination,
},
};
};
export default function PostPage({
posts,
initialDisplayPosts,
pagination,
}: InferGetStaticPropsType<typeof getStaticProps>) {
return (
<>
<PageSEO
title={siteMetadata.title}
description={siteMetadata.description}
/>
<ListLayout
posts={posts}
initialDisplayPosts={initialDisplayPosts}
pagination={pagination}
title="All Posts"
/>
</>
);
}