Blog System Migration

Situation

The blog system used file-based routes with TSX components (/blog/[slug]/page.tsx). I had to rebuild the whole project to publish an article. It was inefficient, and most of all, inconvenient. Then, I realized markdown syntax could be applicable to this project, as many platforms support it.

Tasks

• Database Integration: Leverage existing Neon PostgreSQL + Prisma infrastructure
• Content Pipeline: Design markdown processing pipeline with consistent styling
• Custom Components: Map markdown elements to Next.js optimized components (Image, Link)
• Routing Strategy: Migrate from slug-based to ID-based URLs
• Backward Compatibility: Maintain old URLs via redirects (SEO preservation)
• Security & Performance: Implement URL sanitization, image optimization, lazy loading

Actions

Phase 1: Infrastructure Preparation

1. Designed normalized schema: post table with many-to-many tag relations via junction table
2. Created the @juun/db package: a framework-agnostic database client with namespace pattern
3. Added caching layer using next/cache to reduce database queries by ~99%
4. Structured both DB and cache APIs with consistent namespace pattern (post.get.all(), post.get.byId())

Phase 2: Content Pipeline Development

5. Designed markdown processing pipeline using unified/remark/rehype ecosystem:
   • gray-matter: Extract frontmatter metadata
   • remark-parse → remark-gfm → remark-rehype: Markdown to HTML AST
   • rehype-raw: Parse raw HTML nodes
   • rehype-unwrap-images: Prevent hydration errors
   • rehype-react: Convert AST to React elements
6. Implemented custom component mappings:
   • <a> → Next.js Link (client-side navigation) / secure external links