跪拜 Guibai
← All articles
Frontend

Half a Day to a Live Site: Claude Code Cuts Solo Dev Time from Days to Hours

By 小牛不牛的程序员 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

A one-person shop can now ship a complete, SEO-friendly static site with a content system in an afternoon at near-zero recurring cost. The bottleneck shifts from coding speed to clarity of specification: the AI handled a real dependency-resolution puzzle that would have burned an hour of a senior dev's time, but it needed a human to define the architecture boundaries that kept `fs` imports out of client components.

Summary

Starting from a natural-language prompt in the terminal, Claude Code initialized a Next.js 14 project, installed dependencies, wrote all page and global components, configured SEO metadata, generated a sitemap, and produced deployment docs. The whole build — project setup, content system, Cloudflare adaptation, and responsive layout — finished in roughly 4 hours, compared to an estimated 3–5 days of manual work.

A version-compatibility deadlock with the Cloudflare Pages adapter showed the tool's engineering judgement: Claude Code traversed every historical release of `@cloudflare/next-on-pages` to find a version that didn't declare a phantom peer dependency on a nonexistent Next.js release, then locked the version and restructured the blog list from server-side dynamic to client-side static filtering.

The final stack — Next.js SSG, Tailwind CSS, Markdown with gray-matter, and Cloudflare Pages — keeps annual hosting costs at $11.48 for the domain plus negligible AI token spend. Content updates are a Markdown file and a git push.

Takeaways
Claude Code built a 7-page Next.js site with blog, products, and toolbox in roughly 4 hours — a task manually estimated at 3–5 days.
Total annual cost is $11.48 for a Namecheap domain; Cloudflare Pages and GitHub hosting are free, and AI token spend was about ¥5.
The content system uses Markdown files with YAML frontmatter, read via gray-matter, with no database or CMS.
When `@cloudflare/[email protected]` demanded a nonexistent Next.js version, Claude Code independently scanned all historical adapter releases and locked onto v1.13.15, which had no peer-dependency constraint.
Dynamic filtering on a fully static Cloudflare Pages site was solved by generating the full article list at build time and running search, category filters, and pagination client-side with `useSearchParams` and `useState`, wrapped in Suspense.
Server and client component boundaries required splitting data-access modules (which import `fs`) from pure constant files to prevent client-side leaks.
Conclusions

The dependency-resolution episode is the most telling data point: the AI didn't just generate code, it performed a bisect-like investigation across package versions to resolve a real-world compatibility deadlock. That's engineering work, not templating.

The 3–5x efficiency multiplier reported here aligns with a pattern seen across AI coding tools — but the multiplier only holds when the developer already knows the architecture (SSG vs SSR, server/client component split, static filtering constraints). The AI executes; the human still draws the boundary lines.

Cloudflare Pages' restriction to fully static output forced a client-side filtering design that is simpler to maintain than a hybrid approach and costs nothing to serve, making it a useful default pattern for content sites that don't need real-time data.

Concepts & terms
SSG (Static Site Generation)
A build-time process that pre-renders every page of a site as static HTML files. With Next.js, `generateStaticParams` creates pages for dynamic routes (like blog posts) at build time, so the server serves plain files with no runtime computation — fast, cheap, and SEO-friendly.
Server Component vs. Client Component boundary
In Next.js App Router, Server Components run only on the server and can use Node.js APIs like `fs`. Client Components (marked with `"use client"`) run in the browser and cannot import modules that depend on server-only APIs. Splitting data-fetching logic from UI constants prevents `fs` from leaking into the browser bundle.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗