Blog works

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

@@ -0,0 +1,23 @@
+import { getBlogBySlug, getAllBlogSlugs } from "@/lib/mdx";
+
+export async function generateStaticParams() {
+  const slugs = await getAllBlogSlugs();
+  return slugs.map(({ slug }) => ({
+    slug,
+  }));
+}
+
+export default async function BlogPage({ params }) {
+  const blog = await getBlogBySlug(params.slug);
+  return (
+    <main className="prose mx-auto">
+      <article>
+        <h1>{blog.frontmatter.title}</h1>
+        <p>{blog.frontmatter.author}</p>
+        <p>{blog.frontmatter.publishDate}</p>
+        <article>{blog.content}</article>
+      </article>
+    </main>
+  );
+}
+

src/app/blog/page.jsx

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

src/app/blog/posts/ssg.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.
+