Blog với NextJS

# Tạo dự án Next (dùng create-next-app, KHÔNG dùng Vite cho Next)
npx create-next-app@latest my-blog
cd my-blog
npm run dev

my-blog/
 ├─ posts/                     # nội dung bài viết dạng .md / .mdx
 │   ├─ nextjs-la-gi.md
 │   └─ hoc-react.md
 ├─ app/
 │   ├─ page.tsx               # trang chủ: danh sách bài
 │   ├─ blog/[slug]/page.tsx   # trang chi tiết bài viết
 │   ├─ layout.tsx             # metadata gốc + template title
 │   ├─ sitemap.ts             # sinh sitemap.xml
 │   └─ robots.ts
 └─ lib/posts.ts               # đọc file markdown

1// app/page.tsx — danh sách bài (SSG: dựng lúc build)
2import Link from "next/link";
3import { getAllPosts } from "@/lib/posts";
4
5export default function Home() {
6  const posts = getAllPosts(); // [{ slug, title, excerpt, date }]
7  return (
8    <ul>
9      {posts.map((p) => (
10        <li key={p.slug}>
11          <Link href={"/blog/" + p.slug}>{p.title}</Link>
12        </li>
13      ))}
14    </ul>
15  );
16}

1// app/blog/[slug]/page.tsx — trang chi tiết + metadata động
2import { getPost, getAllSlugs } from "@/lib/posts";
3
4// Dựng sẵn mọi trang bài viết lúc build (SSG)
5export async function generateStaticParams() {
6  return getAllSlugs().map((slug) => ({ slug }));
7}
8
9// SEO: title/description theo từng bài
10export async function generateMetadata({ params }) {
11  const post = getPost(params.slug);
12  return { title: post.title + " | Blog", description: post.excerpt };
13}
14
15export const revalidate = 3600; // ISR: làm mới mỗi giờ
16
17export default function PostPage({ params }) {
18  const post = getPost(params.slug);
19  return (
20    <article>
21      <h1>{post.title}</h1>
22      <div dangerouslySetInnerHTML={{ __html: post.html }} />
23    </article>
24  );
25}

1// lib/posts.ts — đọc markdown bằng gray-matter + marked
2// npm i gray-matter marked
3import fs from "fs";
4import path from "path";
5import matter from "gray-matter";
6import { marked } from "marked";
7
8const DIR = path.join(process.cwd(), "posts");
9
10export function getAllSlugs() {
11  return fs.readdirSync(DIR).map((f) => f.replace(/\.md$/, ""));
12}
13export function getPost(slug) {
14  const raw = fs.readFileSync(path.join(DIR, slug + ".md"), "utf8");
15  const { data, content } = matter(raw);          // tách frontmatter
16  return { slug, ...data, html: marked(content) };
17}