Build a Blog Engine with Next.js

npx create-next-app@latest my-blog --typescript --app --tailwind
cd my-blog
npm install next-mdx-remote shiki gray-matter reading-time

mkdir -p src/content/posts

// src/lib/posts.ts
import fs from "fs";
import path from "path";
import matter from "gray-matter";
import readingTime from "reading-time";

interface PostFrontmatter {
  title: string;
  description: string;
  date: string;
  tags: string[];
  published: boolean;
}

interface Post {
  slug: string;
  frontmatter: PostFrontmatter;
  content: string;
  readingTime: string;
}

const POSTS_DIR = path.join(process.cwd(), "src/content/posts");

export function getAllPosts(): Post[] {
  const files = fs.readdirSync(POSTS_DIR).filter((f) => f.endsWith(".mdx"));

  return files
    .map((filename) => {
      const filePath = path.join(POSTS_DIR, filename);
      const raw = fs.readFileSync(filePath, "utf-8");
      const { data, content } = matter(raw);

      return {
        slug: filename.replace(".mdx", ""),
        frontmatter: data as PostFrontmatter,
        content,
        readingTime: readingTime(content).text,
      };
    })
    .filter((post) => post.frontmatter.published)
    .sort(
      (a, b) => new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime()
    );
}

export function getPostBySlug(slug: string): Post | undefined {
  return getAllPosts().find((post) => post.slug === slug);
}

export function getAllTags(): string[] {
  const tags = getAllPosts().flatMap((post) => post.frontmatter.tags);
  return [...new Set(tags)].sort();
}

// src/app/blog/[slug]/page.tsx
import { notFound } from "next/navigation";
import { MDXRemote } from "next-mdx-remote/rsc";
import { getAllPosts, getPostBySlug } from "@/lib/posts";

interface PageProps {
  params: Promise<{ slug: string }>;
}

export async function generateStaticParams() {
  return getAllPosts().map((post) => ({ slug: post.slug }));
}

export default async function BlogPost({ params }: PageProps) {
  const { slug } = await params;
  const post = getPostBySlug(slug);

  if (!post) {
    notFound();
  }

  return (
    <article className="mx-auto max-w-2xl py-16">
      <header className="mb-8">
        <h1 className="text-4xl font-bold">{post.frontmatter.title}</h1>
        <p className="mt-2 text-gray-500">
          {post.frontmatter.date} · {post.readingTime}
        </p>
        <div className="mt-4 flex gap-2">
          {post.frontmatter.tags.map((tag) => (
            <span
              key={tag}
              className="rounded-full bg-gray-100 px-3 py-1 text-sm"
            >
              {tag}
            </span>
          ))}
        </div>
      </header>
      <div className="prose prose-lg">
        <MDXRemote source={post.content} />
      </div>
    </article>
  );
}

// src/app/blog/page.tsx
import Link from "next/link";
import { getAllPosts } from "@/lib/posts";

export default function BlogIndex() {
  const posts = getAllPosts();

  return (
    <div className="mx-auto max-w-2xl py-16">
      <h1 className="mb-12 text-4xl font-bold">Blog</h1>
      <div className="space-y-8">
        {posts.map((post) => (
          <article key={post.slug}>
            <Link href={`/blog/${post.slug}`} className="group block">
              <h2 className="text-2xl font-semibold group-hover:text-blue-600">
                {post.frontmatter.title}
              </h2>
              <p className="mt-1 text-gray-500">
                {post.frontmatter.date} · {post.readingTime}
              </p>
              <p className="mt-2 text-gray-700">
                {post.frontmatter.description}
              </p>
            </Link>
          </article>
        ))}
      </div>
    </div>
  );
}

// src/app/blog/tag/[tag]/page.tsx
import Link from "next/link";
import { getAllPosts, getAllTags } from "@/lib/posts";
import { notFound } from "next/navigation";

interface PageProps {
  params: Promise<{ tag: string }>;
}

export async function generateStaticParams() {
  return getAllTags().map((tag) => ({ tag }));
}

export default async function TagPage({ params }: PageProps) {
  const { tag } = await params;
  const posts = getAllPosts().filter((post) =>
    post.frontmatter.tags.includes(tag)
  );

  if (posts.length === 0) {
    notFound();
  }

  return (
    <div className="mx-auto max-w-2xl py-16">
      <h1 className="mb-4 text-4xl font-bold">Tagged: {tag}</h1>
      <p className="mb-12 text-gray-500">{posts.length} posts</p>
      <div className="space-y-8">
        {posts.map((post) => (
          <article key={post.slug}>
            <Link href={`/blog/${post.slug}`}>
              <h2 className="text-2xl font-semibold hover:text-blue-600">
                {post.frontmatter.title}
              </h2>
              <p className="mt-1 text-gray-500">{post.frontmatter.date}</p>
            </Link>
          </article>
        ))}
      </div>
    </div>
  );
}

// src/lib/highlight.ts
import { createHighlighter } from "shiki";

let highlighter: Awaited<ReturnType<typeof createHighlighter>> | null = null;

export async function highlight(code: string, lang: string): Promise<string> {
  if (!highlighter) {
    highlighter = await createHighlighter({
      themes: ["github-dark"],
      langs: ["typescript", "javascript", "bash", "json", "css", "html"],
    });
  }

  return highlighter.codeToHtml(code, { lang, theme: "github-dark" });
}

// src/app/feed.xml/route.ts
import { getAllPosts } from "@/lib/posts";

export async function GET(): Promise<Response> {
  const posts = getAllPosts();
  const siteUrl = "https://yourblog.com";

  const xml = `<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>My Blog</title>
    <link>${siteUrl}</link>
    <description>A developer blog</description>
    <atom:link href="${siteUrl}/feed.xml" rel="self" type="application/rss+xml"/>
    ${posts
      .map(
        (post) => `
    <item>
      <title>${post.frontmatter.title}</title>
      <link>${siteUrl}/blog/${post.slug}</link>
      <description>${post.frontmatter.description}</description>
      <pubDate>${new Date(post.frontmatter.date).toUTCString()}</pubDate>
      <guid>${siteUrl}/blog/${post.slug}</guid>
    </item>`
      )
      .join("")}
  </channel>
</rss>`;

  return new Response(xml, {
    headers: { "Content-Type": "application/xml" },
  });
}

npm run build
npx vercel