data-fetching

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@types/node": "17.0.23",
     "@types/react": "17.0.43",
+    "gray-matter": "4.0.3",
     "next": "latest",
     "react": "17.0.2",
     "react-dom": "17.0.2",

posts/first-log.md

@@ -0,0 +1,11 @@
+---
+title: "Two Forms of Pre-rendering"
+date: "2020-01-01"
+---
+
+Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.
+
+- **Static Generation** is the pre-rendering method that generates the HTML at **build time**. The pre-rendered HTML is then _reused_ on each request.
+- **Server-side Rendering** is the pre-rendering method that generates the HTML on **each request**.
+
+Importantly, Next.js lets you **choose** which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

posts/second-log.md

@@ -0,0 +1,19 @@
+---
+title: "When to Use Static Generation v.s. Server-side Rendering"
+date: "2020-01-02"
+---
+
+We recommend using **Static Generation** (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.
+
+You can use Static Generation for many types of pages, including:
+
+- Marketing pages
+- Blog posts
+- E-commerce product listings
+- Help and documentation
+
+You should ask yourself: "Can I pre-render this page **ahead** of a user's request?" If the answer is yes, then you should choose Static Generation.
+
+On the other hand, Static Generation is **not** a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.
+
+In that case, you can use **Server-Side Rendering**. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.

src/lib/posts.tsx

@@ -0,0 +1,37 @@
+import fs from "fs";
+import path from "path";
+import matter from "gray-matter";
+//current working directory
+const postsDirectory = path.join(process.cwd(), "posts");
+
+export function getSortedPostsData() {
+  // Get file names under /posts
+  const fileNames = fs.readdirSync(postsDirectory);
+  const allPostsData = fileNames.map((fileName) => {
+    // Remove ".md" from file name to get id
+    const id = fileName.replace(/\.md$/, "");
+
+    // Read markdown file as string
+    const fullPath = path.join(postsDirectory, fileName);
+    const fileContents = fs.readFileSync(fullPath, "utf8");
+
+    // Use gray-matter to parse the post metadata section
+    // テキストデータ内上部にある「　---」で囲まれた部分をdataとして位置づけて取得する
+    const matterResult = matter(fileContents);
+
+    // Combine the data with the id
+    // Combine the data【---で囲まれた部分】 with the id【拡張子無しファイル名】
+    return {
+      id,
+      ...(matterResult.data as { date: string; title: string })
+    };
+  });
+  // Sort posts by date
+  return allPostsData.sort((a, b) => {
+    if (a.date < b.date) {
+      return 1;
+    } else {
+      return -1;
+    }
+  });
+}

src/pages/index.tsx

@@ -1,15 +1,51 @@
 import styles from "../styles/page.module.css";
-const RenderPage = () => (
-  <div className={styles.container}>
-    <div>
-      <h2>Home page</h2>
-      <p>branch 07_csb-rseo19</p>
-      <code>
-        ... making like easy-notion-blog
-        <br />
-        API routing　
-      </code>
+
+import { getSortedPostsData } from "../lib/posts";
+import { GetStaticProps } from "next";
+
+export const getStaticProps: GetStaticProps = async () => {
+  const allPostsData = getSortedPostsData();
+  return {
+    props: {
+      allPostsData
+    }
+  };
+};
+
+export default function RenderPage({
+  allPostsData
+}: {
+  allPostsData: {
+    date: string;
+    title: string;
+    id: string;
+  }[];
+}) {
+  return (
+    <div className={styles.container}>
+      <div>
+        <h2>Home page</h2>
+        <p>branch 08_csb-rw064k</p>
+        <code>
+          ... making like easy-notion-blog
+          <br />
+          Data fetching
+        </code>
+      </div>
+      <section>
+        <h3>verse data</h3>
+        <ul>
+          {allPostsData.map(({ id, date, title }) => (
+            <li key={id}>
+              {title}
+              <br />
+              {id}
+              <br />
+              {date}
+            </li>
+          ))}
+        </ul>
+      </section>
     </div>
-  </div>
-);
-export default RenderPage;
+  );
+}