使用 Next.js 和 Supabase 构建个人博客

为什么选择 Next.js + Supabase

个人技术博客是开发者展示技术深度和记录学习路径的重要载体。选择 Next.js 和 Supabase 的组合有几个关键原因：

• Next.js App Router：支持 Server Components，首屏 SEO 友好，构建速度快
• Supabase：开源的 Firebase 替代品，提供 PostgreSQL 数据库、认证、实时订阅
• Vercel 部署：与 Next.js 深度集成，一键部署，免费额度充足

项目结构

我们采用 feature-first 的目录组织方式：

frontend/
  src/
    app/          # 路由与页面
    components/   # 通用 UI 组件
    features/     # 业务功能模块
    lib/          # 工具与数据访问
    config/       # 环境变量与路径

数据库设计

博客的核心数据模型包含四张表：

创建 posts 表

CREATE TABLE public.posts (
  id             uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  title          text NOT NULL,
  slug           text NOT NULL UNIQUE,
  excerpt        text,
  content        text NOT NULL,
  status         text NOT NULL DEFAULT 'draft'
                 CHECK (status IN ('draft', 'published', 'archived')),
  published_at   timestamptz,
  category_id    uuid REFERENCES public.categories(id),
  reading_time   integer,
  search_vector  tsvector,
  created_at     timestamptz NOT NULL DEFAULT now(),
  updated_at     timestamptz NOT NULL DEFAULT now()
);

RLS 安全策略

Supabase 的 Row Level Security 让我们可以在数据库层面控制访问权限。V1 博客只开放匿名读取已发布内容：

CREATE POLICY "公开读取已发布文章" ON public.posts
  FOR SELECT TO anon
  USING (status = 'published' AND published_at <= now());

代码高亮与 Markdown 渲染

使用 unified + remark-gfm + rehype-highlight 组合处理 Markdown：

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkGfm from "remark-gfm";
import remarkRehype from "remark-rehype";
import rehypeHighlight from "rehype-highlight";
import rehypeStringify from "rehype-stringify";

export async function parseMarkdown(content: string): Promise<string> {
  const result = await unified()
    .use(remarkParse)
    .use(remarkGfm)
    .use(remarkRehype)
    .use(rehypeHighlight, { detect: true })
    .use(rehypeStringify)
    .process(content);
  return String(result);
}

小结

Next.js + Supabase 是构建个人博客的理想组合。Server Components 让数据获取变得简洁，Supabase 的 RLS 提供了安全的数据访问控制。在下一篇文章中，我们将深入 TypeScript 的类型系统。