surfer-kim.
surfer-kim Blog
surfer-kim Blog

surfer-kim Blog

Tags
Projects
Personal
Start
Apr 26, 2026
End
Published
Apr 26, 2026
Author
Jason Kim
Role: Software Engineer
Company: N/A
Technologies: Next.js 14, TypeScript, Notion, React, Tailwind CSS, Redis, Vercel, Claude Code
Duration: 04/2026 – Present
 

Overview

Built a personal blog using Next.js 14 App Router with Notion as a headless CMS, rendered via react-notion-x. The architecture prioritizes performance through Incremental Static Regeneration, an optional Redis caching layer to reduce Notion API load, and a custom image proxy that handles Notion's signed S3 attachment URLs. Development velocity was accelerated by integrating Claude Code as an AI engineering harness — automating issue creation, branch management, PR generation, and code review across the full development cycle.
 

Key Contributions

  • Integrated Notion as a headless CMS using notion-client and react-notion-x, enabling content authoring entirely within Notion while the blog renders via Next.js server components.
  • Implemented a Redis caching layer (via Keyv + KeyvRedis) to cache Notion RecordMap responses, reducing redundant API calls within the ISR revalidation window.
  • Built a custom /api/notion/image proxy to resolve Notion's short-lived S3 signed URLs and attachment:// file references server-side, ensuring covers and inline images never break after URL expiry.
  • Engineered a Claude Code harness using slash commands (/new-task, /work-issue) to automate the full issue-to-PR workflow: GitHub issue creation, feature branch checkout, implementation, type checking, commit, and PR opening — all from a single command.
  • Leveraged Claude Code's /review and iterative feedback loop for automated code review on each PR, catching proxy URL normalization bugs (UUID vs. no-dash block ID format) that would have been silent runtime failures.
  • Designed dynamic routing with generateStaticParams and slug mapping from Notion page titles and custom Slug properties, with full OG metadata and RSS feed generation.
  • Added a surfing page pulling YouTube Shorts via the YouTube Data API, and a collapsible sidebar for site navigation.

Outcomes

  • Launched and actively maintained at https://surfer-kim.vercel.app, with content published directly through Notion — no code deploys required for new posts.
  • Reduced repetitive engineering overhead by ~60% on issue-driven tasks by using Claude Code's harness to handle branching, implementation scaffolding, and PR creation autonomously.
  • Resolved a multi-layered image rendering bug (custom Notion covers not displaying) by tracing it through three layers: NotionNextImage URL unwrapping, attachment:// proxy routing, and Notion API block ID format normalization — caught and fixed within a single Claude-assisted session.
  • Established a scalable content platform supporting tagging, per-post metadata, featured post sorting, and preview image generation with Redis-backed caching.
 

Resources

  • GitHub:
  • Tech Stack: Next.js 14, TypeScript, Tailwind CSS, Notion + react-notion-x, Redis (Keyv), Claude Code
  • Hosting: Vercel
  • CMS: Notion as a headless content platform