Build a Personal Blog — Phase 4: Tags, Search & Pagination

// lib/posts.ts
export interface PostFrontmatter {
  title: string;
  description: string;
  short_description?: string;
  date: string;
  tags: string[];
  image?: string;
  cover_image?: string;
  featured?: boolean;  // MỚI — ghim bài viết lên đầu
}
 
export interface Post {
  slug: string;
  frontmatter: PostFrontmatter;
  content: string;
  readingTime: number;  // MỚI — ước lượng số phút đọc
}

// lib/posts.ts
 
/**
 * Ước lượng reading time (phút).
 * Bỏ code blocks và frontmatter, đếm số từ còn lại.
 * Dùng 200 wpm cho technical content (chậm hơn đọc thông thường).
 */
function calculateReadingTime(content: string): number {
  // Bỏ code blocks (người đọc scan chứ không đọc từng từ)
  const withoutCode = content.replace(/```[\s\S]*?```/g, "");
  // Bỏ frontmatter
  const withoutFrontmatter = withoutCode.replace(/^---[\s\S]*?---/, "");
  // Đếm từ
  const words = withoutFrontmatter
    .trim()
    .split(/\s+/)
    .filter((word) => word.length > 0).length;
 
  return Math.max(1, Math.ceil(words / 200));
}

// lib/posts.ts
 
export async function getAllPosts(): Promise<Post[]> {
  const postsDir = path.join(process.cwd(), "content/posts");
  const files = fs.readdirSync(postsDir).filter((f) => f.endsWith(".mdx"));
 
  const posts: Post[] = files.map((filename) => {
    const slug = filename.replace(/\.mdx$/, "");
    const filePath = path.join(postsDir, filename);
    const fileContent = fs.readFileSync(filePath, "utf-8");
    const { data, content } = matter(fileContent);
 
    return {
      slug,
      frontmatter: data as PostFrontmatter,
      content,
      readingTime: calculateReadingTime(fileContent),
    };
  });
 
  // Sắp xếp: bài featured lên đầu, rồi theo ngày giảm dần
  return posts.sort((a, b) => {
    if (a.frontmatter.featured && !b.frontmatter.featured) return -1;
    if (!a.frontmatter.featured && b.frontmatter.featured) return 1;
    return new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime();
  });
}

// lib/posts.ts
 
export async function getPostBySlug(
  slug: string
): Promise<Post | null> {
  const filePath = path.join(
    process.cwd(),
    "content/posts",
    `${slug}.mdx`
  );
 
  if (!fs.existsSync(filePath)) return null;
 
  const fileContent = fs.readFileSync(filePath, "utf-8");
  const { data, content } = matter(fileContent);
 
  return {
    slug,
    frontmatter: data as PostFrontmatter,
    content,
    readingTime: calculateReadingTime(fileContent),
  };
}

// components/PostCard.tsx (một phần)
<div className="flex items-center gap-2 text-sm text-muted-foreground">
  <time dateTime={post.frontmatter.date}>
    {formatDate(post.frontmatter.date)}
  </time>
  <span>·</span>
  <span>{post.readingTime} min read</span>
</div>

// lib/posts.ts
 
export interface TagInfo {
  name: string;
  count: number;
}
 
/**
 * Lấy tất cả tags unique kèm post count, sắp xếp theo count giảm dần.
 */
export async function getAllTags(): Promise<TagInfo[]> {
  const posts = await getAllPosts();
  const tagMap = new Map<string, number>();
 
  for (const post of posts) {
    for (const tag of post.frontmatter.tags) {
      const normalized = tag.toLowerCase();
      tagMap.set(normalized, (tagMap.get(normalized) ?? 0) + 1);
    }
  }
 
  return Array.from(tagMap.entries())
    .map(([name, count]) => ({ name, count }))
    .sort((a, b) => b.count - a.count);
}
 
/**
 * Lấy tất cả bài viết có tag cụ thể.
 */
export async function getPostsByTag(tag: string): Promise<Post[]> {
  const posts = await getAllPosts();
  return posts.filter((post) =>
    post.frontmatter.tags
      .map((t) => t.toLowerCase())
      .includes(tag.toLowerCase())
  );
}

// components/TagBadge.tsx
import Link from "next/link";
import { Badge } from "@/components/ui/badge";
 
interface TagBadgeProps {
  tag: string;
  count?: number;
  clickable?: boolean;
}
 
export function TagBadge({ tag, count, clickable = true }: TagBadgeProps) {
  const content = (
    <Badge variant="secondary" className="cursor-pointer hover:bg-accent">
      {tag}
      {count !== undefined && (
        <span className="ml-1 text-xs text-muted-foreground">({count})</span>
      )}
    </Badge>
  );
 
  if (!clickable) return content;
 
  return (
    <Link href={`/blog/tags/${encodeURIComponent(tag)}`}>
      {content}
    </Link>
  );
}

// components/PostCard.tsx (một phần — thêm bên dưới date/reading time)
<div className="mt-2 flex flex-wrap gap-1.5">
  {post.frontmatter.tags.slice(0, 4).map((tag) => (
    <TagBadge key={tag} tag={tag} clickable={true} />
  ))}
</div>

// app/blog/tags/[tag]/page.tsx
import { Metadata } from "next";
import { notFound } from "next/navigation";
import { getPostsByTag, getAllTags } from "@/lib/posts";
import { PostCard } from "@/components/PostCard";
import { TagBadge } from "@/components/TagBadge";
 
interface TagPageProps {
  params: Promise<{ tag: string }>;
}
 
export async function generateMetadata({
  params,
}: TagPageProps): Promise<Metadata> {
  const { tag } = await params;
  const decodedTag = decodeURIComponent(tag);
 
  return {
    title: `Posts tagged "${decodedTag}"`,
    description: `All blog posts about ${decodedTag}. Tutorials, guides, and best practices.`,
  };
}
 
export async function generateStaticParams() {
  const tags = await getAllTags();
  return tags.map((tag) => ({ tag: encodeURIComponent(tag.name) }));
}
 
export default async function TagPage({ params }: TagPageProps) {
  const { tag } = await params;
  const decodedTag = decodeURIComponent(tag);
  const posts = await getPostsByTag(decodedTag);
 
  if (posts.length === 0) {
    notFound();
  }
 
  const allTags = await getAllTags();
 
  return (
    <div className="mx-auto max-w-4xl px-4 py-12">
      <h1 className="text-3xl font-bold">
        Posts tagged &ldquo;{decodedTag}&rdquo;
      </h1>
      <p className="mt-2 text-muted-foreground">
        {posts.length} {posts.length === 1 ? "post" : "posts"} found
      </p>
 
      {/* Tag cloud — hiển thị tất cả tags để khám phá */}
      <div className="mt-6 flex flex-wrap gap-2">
        {allTags.map((t) => (
          <TagBadge
            key={t.name}
            tag={t.name}
            count={t.count}
            clickable={t.name !== decodedTag}
          />
        ))}
      </div>
 
      {/* Bài viết đã filter */}
      <div className="mt-8 space-y-6">
        {posts.map((post) => (
          <PostCard key={post.slug} post={post} />
        ))}
      </div>
    </div>
  );
}

// lib/posts.ts
 
/**
 * Search posts theo query string.
 * Match với title, description, và tags.
 * Case-insensitive, trả về kết quả sắp xếp theo relevance.
 */
export async function searchPosts(query: string): Promise<Post[]> {
  const posts = await getAllPosts();
  const q = query.toLowerCase().trim();
 
  if (!q) return posts;
 
  return posts.filter((post) => {
    const { title, description, tags } = post.frontmatter;
    const searchable = [
      title,
      description,
      ...tags,
    ]
      .join(" ")
      .toLowerCase();
 
    return q.split(/\s+/).every((word) => searchable.includes(word));
  });
}

// components/SearchBar.tsx
"use client";
 
import { useRouter, useSearchParams } from "next/navigation";
import { useState, useTransition } from "react";
import { Input } from "@/components/ui/input";
import { Search, X } from "lucide-react";
 
export function SearchBar() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [isPending, startTransition] = useTransition();
 
  const initialQuery = searchParams.get("q") ?? "";
  const [query, setQuery] = useState(initialQuery);
 
  function handleSearch(value: string) {
    setQuery(value);
 
    startTransition(() => {
      const params = new URLSearchParams(searchParams.toString());
      if (value) {
        params.set("q", value);
        params.delete("page"); // reset về page 1 khi search mới
      } else {
        params.delete("q");
      }
      router.push(`/blog?${params.toString()}`);
    });
  }
 
  function handleClear() {
    handleSearch("");
  }
 
  return (
    <div className="relative">
      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
      <Input
        type="text"
        placeholder="Search posts..."
        value={query}
        onChange={(e) => handleSearch(e.target.value)}
        className="pl-9 pr-9"
      />
      {query && (
        <button
          type="button"
          onClick={handleClear}
          className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
        >
          <X className="h-4 w-4" />
        </button>
      )}
      {isPending && (
        <div className="absolute right-10 top-1/2 -translate-y-1/2">
          <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
        </div>
      )}
    </div>
  );
}

// app/blog/page.tsx
import { searchPosts, getAllTags } from "@/lib/posts";
import { PostCard } from "@/components/PostCard";
import { SearchBar } from "@/components/SearchBar";
import { TagBadge } from "@/components/TagBadge";
import { Suspense } from "react";
 
interface BlogPageProps {
  searchParams: Promise<{ q?: string; page?: string }>;
}
 
export default async function BlogPage({ searchParams }: BlogPageProps) {
  const { q, page } = await searchParams;
  const posts = await searchPosts(q ?? "");
  const allTags = await getAllTags();
 
  return (
    <div className="mx-auto max-w-4xl px-4 py-12">
      <h1 className="text-3xl font-bold">Blog</h1>
 
      {/* Search bar */}
      <div className="mt-6">
        <Suspense fallback={null}>
          <SearchBar />
        </Suspense>
      </div>
 
      {/* Tag cloud */}
      <div className="mt-4 flex flex-wrap gap-2">
        {allTags.map((tag) => (
          <TagBadge key={tag.name} tag={tag.name} count={tag.count} />
        ))}
      </div>
 
      {/* Thông tin kết quả search */}
      {q && (
        <p className="mt-4 text-sm text-muted-foreground">
          {posts.length} {posts.length === 1 ? "result" : "results"} cho &ldquo;{q}&rdquo;
        </p>
      )}
 
      {/* Danh sách bài viết */}
      <div className="mt-6 space-y-6">
        {posts.length > 0 ? (
          posts.map((post) => (
            <PostCard key={post.slug} post={post} />
          ))
        ) : (
          <p className="text-center text-muted-foreground py-12">
            Không tìm thấy bài viết nào. Thử từ khoá khác nhé.
          </p>
        )}
      </div>
    </div>
  );
}

// lib/posts.ts
 
export const POSTS_PER_PAGE = 6;
 
export interface PaginatedResult {
  posts: Post[];
  totalPosts: number;
  totalPages: number;
  currentPage: number;
  hasNextPage: boolean;
  hasPrevPage: boolean;
}
 
/**
 * Phân trang một array posts.
 */
export function paginatePosts(
  posts: Post[],
  page: number = 1,
  perPage: number = POSTS_PER_PAGE
): PaginatedResult {
  const totalPosts = posts.length;
  const totalPages = Math.max(1, Math.ceil(totalPosts / perPage));
  const currentPage = Math.min(Math.max(1, page), totalPages);
  const start = (currentPage - 1) * perPage;
  const end = start + perPage;
 
  return {
    posts: posts.slice(start, end),
    totalPosts,
    totalPages,
    currentPage,
    hasNextPage: currentPage < totalPages,
    hasPrevPage: currentPage > 1,
  };
}

// components/Pagination.tsx
import Link from "next/link";
import {
  ChevronLeft,
  ChevronRight,
  ChevronsLeft,
  ChevronsRight,
} from "lucide-react";
import { Button } from "@/components/ui/button";
 
interface PaginationProps {
  currentPage: number;
  totalPages: number;
  basePath: string;
  searchParams?: Record<string, string>;
}
 
export function Pagination({
  currentPage,
  totalPages,
  basePath,
  searchParams = {},
}: PaginationProps) {
  if (totalPages <= 1) return null;
 
  function buildUrl(page: number): string {
    const params = new URLSearchParams(searchParams);
    if (page > 1) {
      params.set("page", String(page));
    } else {
      params.delete("page");
    }
    const qs = params.toString();
    return qs ? `${basePath}?${qs}` : basePath;
  }
 
  // Hiển thị tối đa 5 số trang, centered quanh trang hiện tại
  const pageNumbers: number[] = [];
  const start = Math.max(1, currentPage - 2);
  const end = Math.min(totalPages, start + 4);
  for (let i = start; i <= end; i++) {
    pageNumbers.push(i);
  }
 
  return (
    <nav
      aria-label="Pagination"
      className="mt-12 flex items-center justify-center gap-1"
    >
      {/* Trang đầu */}
      <Button
        variant="ghost"
        size="icon"
        asChild
        disabled={currentPage <= 1}
      >
        <Link href={buildUrl(1)} aria-label="First page">
          <ChevronsLeft className="h-4 w-4" />
        </Link>
      </Button>
 
      {/* Trang trước */}
      <Button
        variant="ghost"
        size="icon"
        asChild
        disabled={currentPage <= 1}
      >
        <Link
          href={buildUrl(currentPage - 1)}
          aria-label="Previous page"
        >
          <ChevronLeft className="h-4 w-4" />
        </Link>
      </Button>
 
      {/* Số trang */}
      {pageNumbers.map((page) => (
        <Button
          key={page}
          variant={page === currentPage ? "default" : "ghost"}
          size="icon"
          asChild={page !== currentPage}
        >
          {page === currentPage ? (
            <span>{page}</span>
          ) : (
            <Link href={buildUrl(page)}>{page}</Link>
          )}
        </Button>
      ))}
 
      {/* Trang sau */}
      <Button
        variant="ghost"
        size="icon"
        asChild
        disabled={currentPage >= totalPages}
      >
        <Link
          href={buildUrl(currentPage + 1)}
          aria-label="Next page"
        >
          <ChevronRight className="h-4 w-4" />
        </Link>
      </Button>
 
      {/* Trang cuối */}
      <Button
        variant="ghost"
        size="icon"
        asChild
        disabled={currentPage >= totalPages}
      >
        <Link href={buildUrl(totalPages)} aria-label="Last page">
          <ChevronsRight className="h-4 w-4" />
        </Link>
      </Button>
    </nav>
  );
}

// app/blog/page.tsx (updated)
import { searchPosts, getAllTags, paginatePosts } from "@/lib/posts";
import { PostCard } from "@/components/PostCard";
import { SearchBar } from "@/components/SearchBar";
import { TagBadge } from "@/components/TagBadge";
import { Pagination } from "@/components/Pagination";
import { Suspense } from "react";
 
interface BlogPageProps {
  searchParams: Promise<{ q?: string; page?: string }>;
}
 
export default async function BlogPage({ searchParams }: BlogPageProps) {
  const { q, page } = await searchParams;
  const allPosts = await searchPosts(q ?? "");
  const allTags = await getAllTags();
 
  const currentPage = parseInt(page ?? "1", 10);
  const paginated = paginatePosts(allPosts, currentPage);
 
  // Build search params object cho pagination URLs
  const paginationParams: Record<string, string> = {};
  if (q) paginationParams.q = q;
 
  return (
    <div className="mx-auto max-w-4xl px-4 py-12">
      <h1 className="text-3xl font-bold">Blog</h1>
 
      {/* Search bar */}
      <div className="mt-6">
        <Suspense fallback={null}>
          <SearchBar />
        </Suspense>
      </div>
 
      {/* Tag cloud */}
      <div className="mt-4 flex flex-wrap gap-2">
        {allTags.map((tag) => (
          <TagBadge key={tag.name} tag={tag.name} count={tag.count} />
        ))}
      </div>
 
      {/* Thông tin kết quả search */}
      {q && (
        <p className="mt-4 text-sm text-muted-foreground">
          {paginated.totalPosts} {paginated.totalPosts === 1 ? "result" : "results"} cho &ldquo;{q}&rdquo;
        </p>
      )}
 
      {/* Danh sách bài viết */}
      <div className="mt-6 space-y-6">
        {paginated.posts.length > 0 ? (
          paginated.posts.map((post) => (
            <PostCard key={post.slug} post={post} />
          ))
        ) : (
          <p className="text-center text-muted-foreground py-12">
            Không tìm thấy bài viết nào. Thử từ khoá khác nhé.
          </p>
        )}
      </div>
 
      {/* Pagination controls */}
      <Pagination
        currentPage={paginated.currentPage}
        totalPages={paginated.totalPages}
        basePath="/blog"
        searchParams={paginationParams}
      />
    </div>
  );
}

---
title: "Build a Personal Blog — Roadmap"
description: "Complete guide to building and deploying your own blog"
date: "2026-02-20"
tags: ["nextjs", "blog"]
featured: true
---

// Đã có trong getAllPosts() đã update
return posts.sort((a, b) => {
  if (a.frontmatter.featured && !b.frontmatter.featured) return -1;
  if (!a.frontmatter.featured && b.frontmatter.featured) return 1;
  return new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime();
});

// components/PostCard.tsx (một phần — thêm vào card header)
import { Pin } from "lucide-react";
 
// Bên trong component:
{post.frontmatter.featured && (
  <span className="inline-flex items-center gap-1 text-xs font-medium text-primary">
    <Pin className="h-3 w-3" />
    Featured
  </span>
)}

// app/blog/tags/[tag]/page.tsx (updated generateMetadata)
export async function generateMetadata({
  params,
}: TagPageProps): Promise<Metadata> {
  const { tag } = await params;
  const decodedTag = decodeURIComponent(tag);
  const posts = await getPostsByTag(decodedTag);
 
  return {
    title: `Posts tagged "${decodedTag}" | My Blog`,
    description: `Browse ${posts.length} ${
      posts.length === 1 ? "article" : "articles"
    } about ${decodedTag}. Tutorials, guides, and practical examples.`,
    openGraph: {
      title: `Posts tagged "${decodedTag}"`,
      description: `${posts.length} articles about ${decodedTag}`,
      type: "website",
    },
  };
}

// app/blog/page.tsx (thêm ở đầu file)
import { Metadata } from "next";
 
interface BlogPageProps {
  searchParams: Promise<{ q?: string; page?: string }>;
}
 
export async function generateMetadata({
  searchParams,
}: BlogPageProps): Promise<Metadata> {
  const { q, page } = await searchParams;
  const pageNum = parseInt(page ?? "1", 10);
 
  let title = "Blog";
  if (q) title = `Search: "${q}" | Blog`;
  if (pageNum > 1) title += ` — Page ${pageNum}`;
 
  return {
    title,
    description: q
      ? `Search results for "${q}"`
      : "Read the latest articles about web development, Next.js, TypeScript, and more.",
  };
}

// app/blog/tags/[tag]/page.tsx (updated)
import { Metadata } from "next";
import { notFound } from "next/navigation";
import { getPostsByTag, getAllTags, paginatePosts } from "@/lib/posts";
import { PostCard } from "@/components/PostCard";
import { TagBadge } from "@/components/TagBadge";
import { Pagination } from "@/components/Pagination";
 
interface TagPageProps {
  params: Promise<{ tag: string }>;
  searchParams: Promise<{ page?: string }>;
}
 
export default async function TagPage({ params, searchParams }: TagPageProps) {
  const { tag } = await params;
  const { page } = await searchParams;
  const decodedTag = decodeURIComponent(tag);
  const posts = await getPostsByTag(decodedTag);
 
  if (posts.length === 0) {
    notFound();
  }
 
  const currentPage = parseInt(page ?? "1", 10);
  const paginated = paginatePosts(posts, currentPage);
  const allTags = await getAllTags();
 
  return (
    <div className="mx-auto max-w-4xl px-4 py-12">
      <h1 className="text-3xl font-bold">
        Posts tagged &ldquo;{decodedTag}&rdquo;
      </h1>
      <p className="mt-2 text-muted-foreground">
        {paginated.totalPosts} {paginated.totalPosts === 1 ? "post" : "posts"} found
      </p>
 
      {/* Tag cloud */}
      <div className="mt-6 flex flex-wrap gap-2">
        {allTags.map((t) => (
          <TagBadge
            key={t.name}
            tag={t.name}
            count={t.count}
            clickable={t.name !== decodedTag}
          />
        ))}
      </div>
 
      {/* Bài viết đã filter */}
      <div className="mt-8 space-y-6">
        {paginated.posts.map((post) => (
          <PostCard key={post.slug} post={post} />
        ))}
      </div>
 
      {/* Pagination */}
      <Pagination
        currentPage={paginated.currentPage}
        totalPages={paginated.totalPages}
        basePath={`/blog/tags/${encodeURIComponent(decodedTag)}`}
      />
    </div>
  );
}

my-blog/
├── app/
│   ├── api/
│   │   ├── views/[slug]/route.ts
│   │   └── subscribe/route.ts
│   └── blog/
│       ├── page.tsx                 ← ĐÃ SỬA (search + pagination)
│       ├── [slug]/page.tsx
│       └── tags/
│           └── [tag]/
│               └── page.tsx         ← MỚI (tag index page)
├── components/
│   ├── PostCard.tsx                 ← ĐÃ SỬA (tags, reading time, featured)
│   ├── SearchBar.tsx                ← MỚI
│   ├── TagBadge.tsx                 ← MỚI
│   ├── Pagination.tsx               ← MỚI
│   ├── ViewCounter.tsx
│   └── SubscribeForm.tsx
├── lib/
│   ├── posts.ts                     ← ĐÃ SỬA (search, tags, pagination, reading time)
│   └── db/
│       ├── index.ts
│       ├── schema.ts
│       └── queries.ts
├── content/posts/
│   └── *.mdx                       ← Thêm `featured: true` để ghim bài
└── ...

// ✅ Đúng — server component đọc props
export default async function BlogPage({ searchParams }: BlogPageProps) {
  const { q } = await searchParams;

// ❌ Sai — useSearchParams chỉ dành cho client components
const searchParams = useSearchParams();

// Encode (trong links)
`/blog/tags/${encodeURIComponent(tag)}`
 
// Decode (trong page component)
const decodedTag = decodeURIComponent(tag);

<Suspense fallback={null}>
  <SearchBar />
</Suspense>