Move src dir

src/app/blog/[slug]/page.tsx

@@ -0,0 +1,18 @@
+import { getBlogBySlug, getAllBlogSlug } from "../fetchers"
+
+export async function generateStaticParams() {
+  return getAllBlogSlug()
+}
+
+export default async function BlogPage({
+  params,
+}: {
+  params: { slug: string }
+}) {
+  const blog = await getBlogBySlug(params.slug)
+  return (
+    <main className="prose">
+      <article>{blog.content}</article>
+    </main>
+  )
+}

src/app/blog/_mdx-content/ssg-renderring.mdx

@@ -0,0 +1,74 @@
+---
+title: 'When to Use Static Generation v.s. Server-side Rendering'
+author: "Timothy Pidashev"
+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
+
+```jsx
+import React, { useState } from 'react';
+
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  const increment = () => {
+    setCount(count + 1);
+  };
+
+  const decrement = () => {
+    setCount(count - 1);
+  };
+
+  return (
+    <div>
+      <h1>Count: {count}</h1>
+      <button onClick={increment}>Increment</button>
+      <button onClick={decrement}>Decrement</button>
+    </div>
+  );
+}
+
+export default Counter;
+```
+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.
+
+```jsx
+  const [count, setCount] = useState(0);
+
+  const increment = () => {
+    setCount(count + 1);
+  };
+
+  const decrement = () => {
+    setCount(count - 1);
+  };
+
+  return (
+    <div>
+      <h1>Count: {count}</h1>
+      <button onClick={increment}>Increment</button>
+      <button onClick={decrement}>Decrement</button>
+    </div>
+  );
+}
+
+export default Counter;
+```
+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/app/blog/fetchers.ts

@@ -0,0 +1,39 @@
+import fs from "fs";
+import path from "path";
+import rehypeHighlight from 'rehype-highlight'
+import { compileMDX } from "next-mdx-remote/rsc";
+
+const contentDir = path.join(process.cwd(), "app/blog/_mdx-content")
+
+export async function getBlogBySlug(slug: string) {
+  const fileName = slug + ".mdx"
+  const filePath = path.join(contentDir, fileName)
+  const fileContent = fs.readFileSync(filePath, "utf8")
+  const { frontmatter, content } = await compileMDX<{
+    title: string
+    author: string
+    publishDate: string
+  }>({
+    source: fileContent,
+    options: { parseFrontmatter: true },
+  })
+  return {
+    frontmatter,
+    content,
+    slug: path.parse(fileName).name,
+  }
+}
+
+export async function getBlogs() {
+  const files = fs.readdirSync(contentDir)
+  const blogs = await Promise.all(
+    files.map(async (file) => await getBlogBySlug(path.parse(file).name))
+  )
+  return blogs
+}
+
+export function getAllBlogSlug() {
+  const files = fs.readdirSync(contentDir)
+  const slugs = files.map((file) => ({ slug: path.parse(file).name }))
+  return slugs
+}

src/app/blog/page.tsx

@@ -0,0 +1,18 @@
+import Link from "next/link"
+import { getBlogs } from "./fetchers"
+
+export default async function BlogsPage() {
+  const blogs = await getBlogs()
+  return (
+    <main>
+      {blogs.map((blog, i) => (
+        <article key={i} className="grid grid-cols-4 text-3xl">
+          <h1>{blog.frontmatter.title}</h1>
+          <p>{blog.frontmatter.author}</p>
+          <p>{blog.frontmatter.publishDate}</p>
+          <Link href={`/blogs/${blog.slug}`}>Read More</Link>
+        </article>
+      ))}
+    </main>
+  )
+}