Refactor getStaticProps in blog page

lib/posts.ts

@@ -0,0 +1,29 @@
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import { MyMatters, Post } from 'types';
+import { sortByDate } from 'lib/utils';
+
+/**
+ * Read all posts with matter info.
+ * @returns
+ */
+export const postLists = async (): Promise<Post[]> => {
+  const files = fs.readdirSync(path.join('pages/p'));
+  const posts = files
+    .map((filename) => {
+      const markdownWithMeta = fs.readFileSync(
+        path.join('pages/p', filename),
+        'utf-8'
+      );
+      const slug = filename.replace(/\.mdx$/, '');
+      const { data: meta } = matter(markdownWithMeta);
+      return {
+        slug,
+        ...({ ...meta } as MyMatters),
+      };
+    })
+    .sort(sortByDate);
+
+  return posts;
+};

lib/utils/constant.ts

@@ -1,4 +0,0 @@
-export const server =
-  process.env.NODE_ENV === 'development'
-    ? 'http://localhost:3000'
-    : 'https://rua.plus';

pages/api/posts.ts

@@ -1,31 +1,13 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
-import fs from 'fs';
+import { Post } from 'types';
-import path from 'path';
+import { postLists } from 'lib/posts';
-import matter from 'gray-matter';
-import { MyMatters, Post } from 'types';
-import { sortByDate } from 'lib/utils';
 
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse<Post[]>
 ) {
-  const getPosts = () => {
+  const getPosts = async () => {
-    const files = fs.readdirSync(path.join('pages/p'));
+    const posts = await postLists();
-    const posts = files
-      .map((filename) => {
-        const markdownWithMeta = fs.readFileSync(
-          path.join('pages/p', filename),
-          'utf-8'
-        );
-        const slug = filename.replace(/\.mdx$/, '');
-        const { data: meta } = matter(markdownWithMeta);
-        return {
-          slug,
-          ...({ ...meta } as MyMatters),
-        };
-      })
-      .sort(sortByDate);
-
     res.status(200).json(posts);
   };
 

pages/blog.tsx

@@ -1,8 +1,7 @@
 import MainLayout from 'layouts/MainLayout';
-import { Post } from 'types';
 import { InferGetStaticPropsType } from 'next';
 import { ReactElement } from 'react';
-import { server } from 'lib/utils/constant';
+import { postLists } from 'lib/posts';
 
 const Blog = ({ posts }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
@@ -23,12 +22,9 @@ const Blog = ({ posts }: InferGetStaticPropsType<typeof getStaticProps>) => {
 };
 
 export const getStaticProps = async () => {
-  const response = await fetch(`${server}/api/posts`);
-  const posts = (await response.json()) as Post[];
-
   return {
     props: {
-      posts,
+      posts: await postLists(),
     },
   };
 };