我用 Claude Code 半天撸完了一个完整网站，AI 编程到底提升了多少效率？

前言

2026 年辞职，到现在决定开始全职独立开发。第一件事就是搭个人网站------写博客、展示产品、接单服务、推荐工具，都需要一个属于自己的流量入口。

我花了半天时间，用 Claude Code 从零搭完了一个包含 7 个页面、博客系统、产品展示、工具箱的完整网站，部署到 Cloudflare Pages，总成本一年不到 13 美元。

这篇文章完整复盘技术选型和开发过程，重点聊聊 Claude Code 在实际项目中的效率表现。

技术选型：为什么是这套组合拳

框架：Next.js 14 App Router

选 Next.js 而不是纯 React 或 Vue，核心原因就一个：SSG（静态站点生成）对 SEO 太友好了。

generateStaticParams 在构建时自动生成所有博客、产品、工具的动态路由静态页面
metadata API 给每个页面独立配置 title、description、OpenGraph
不需要额外的 SEO 插件

样式：Tailwind CSS

原子化 CSS，写起来快，配合 AI 生成尤其高效。Claude Code 对 Tailwind 的类名掌握得很好，几乎不需要手动调整样式。

内容管理：Markdown + gray-matter

bash 复制代码

content/
├── blog/          # 博客文章 .md
├── products/      # 产品介绍 .md
└── tools/         # 工具推荐 .md

每篇文章就是一个 .md 文件，YAML frontmatter 定义元数据：

yaml 复制代码

---
title: "文章标题"
date: "2026-07-01"
category: "build-in-public"
tags: ["Claude Code", "Next.js"]
description: "文章描述"
---

部署：Cloudflare Pages

免费、全球 CDN、git push 自动部署、SSL 自动签发。纯静态站点的最佳归宿。

Claude Code 效率实测

开发流程

我做的事：在终端里用自然语言描述了完整需求。

Claude Code 做的事：

npx create-next-app 初始化项目，配置 TypeScript + Tailwind
安装 gray-matter、react-markdown、react-syntax-highlighter、react-icons 等依赖
配置 @cloudflare/next-on-pages 适配器
编写全部页面组件（首页、关于、博客列表/详情、工具箱、服务、联系）
编写全局组件（导航栏、页脚、卡片组件、过滤组件）
配置 SEO metadata、响应式布局
创建示例 Markdown 内容文件
生成 sitemap.xml 和 robots.txt
编写 README 部署文档

效率对比

任务	手写预估	Claude Code 实际
项目初始化 + 配置	2-3 小时	10 分钟
页面 + 组件编写	1-2 天	2 小时
Cloudflare 适配	1-2 小时（查文档+调试）	已有经验，5 分钟
内容系统搭建	2-3 小时	15 分钟
SEO + sitemap	1 小时	5 分钟
总计	3-5 天	半天

AI 在工程决策上的表现

说一个具体的例子。开发中遇到了 Cloudflare Pages 适配器的版本兼容问题：

@cloudflare/next-on-pages@1.13.16 要求 next >= 14.3.0
但 Next.js 14.x 最新只到 14.2.35，14.3.0 这个版本号根本不存在
Claude Code 自己遍历了适配器所有历史版本
找到 1.13.15 不声明 next peer dependency
锁定版本后重构了博客列表组件，从服务端动态改为客户端静态筛选

这种工程决策质量，我自己排查可能要一两个小时，AI 几分钟就定位到了。

项目架构要点

Server Component 与 Client Component 的边界

typescript 复制代码

// ❌ 错误：客户端组件引用了依赖 fs 的模块
"use client";
import { getAllPosts } from "@/lib/blog"; // blog.ts 里面有 import fs

// ✅ 正确：拆分数据层和常量层
// lib/products.ts       --- 服务端：fs 读取 Markdown
// lib/product-constants.ts --- 客户端安全：纯常量定义
// components/ProductCard.tsx --- 客户端：只引常量文件

静态站点动态筛选方案

Cloudflare Pages 不允许动态服务端路由。博客列表的搜索和分类筛选不能走 searchParams，改成了：

css 复制代码

服务端：SSG 生成全量文章列表 HTML
客户端：useSearchParams + useState 做筛选和分页
包裹层：Suspense 防止 CSR 闪烁

踩坑汇总

@cloudflare/next-on-pages 版本锁定：1.13.15，最新版不兼容 Next.js 14.2.x
setupDevPlatform() 副作用：纯静态项目不需要 Cloudflare Workers 环境模拟
fs 模块客户端泄漏：数据读取和类型常量必须拆分文件
博客列表动态路由：Cloudflare 要求全静态，筛选逻辑放客户端

最终成本

项目	年费
域名 (Namecheap)	$11.48
Cloudflare Pages	免费
GitHub	免费
AI Token	约 ¥5

一年不到 13 美元，加上 AI 消耗总共不到人民币 100 块。

总结

Claude Code + Next.js + Cloudflare Pages 这套技术栈，对独立开发者来说几乎是当前最优解：

开发效率比手写快 3-5 倍
部署后零维护成本
数据完全自己掌控
更新内容只需要写 Markdown + git push

AI 编程工具不会替代开发者，但它能让一个人做到以前一个团队才能做的事。对于独立开发者来说，这意味着一人公司的门槛被大大降低了。

项目源码已开源，欢迎 Star 和交流。