企业官网建设流程全解析

从零到上线：Claude Code 搭 Next.js + Cloudflare Pages，模型通道改到 TaoToken 行不行？

先说结论：行。Claude Code 负责改 Next.js 14、Tailwind、Cloudflare 适配器配置和代码，模型请求走 TaoToken，整条链路能跑通。这篇不聊"AI 帮我写代码"这种虚的，只解决一个具体问题——原文里 Claude Code 调模型消耗 Token 时，Key 和 Base URL 得自己接，怎么把这段通道换到 TaoToken，并且换完之后npx create-next-app@14、setupDevPlatform()导致的 dev 404 排查、npx @cloudflare/next-on-pages构建验证这些步骤都不受影响。

如果你正在用 Claude Code 搭 Next.js + Cloudflare Pages，卡在模型通道配置上，这篇可以直接照着抄。TaoToken 官网入口在 https://taotoken.net/?utm_source=taotoken_aicg_blog_end ，注册和创建 Key 都在这里完成。

一、原问题与场景：Claude Code 的模型通道为什么要自己接

原文的流程很清晰：在 Claude Code 终端里敲一段需求描述，让它跑npx create-next-app@14 xiaoniubuniu-web --typescript --tailwind --app，然后装依赖、搭 Markdown 内容系统、配 Cloudflare 适配器，最后用 Cloudflare Pages 构建上线。整个过程半天搞定，效率提升最明显的不是"写代码"本身，而是配置类、调试类的工作——Tailwind 主题配置、TypeScript 严格模式兼容、Cloudflare 适配器版本选择、Server Component 和 Client Component 边界处理。

但这里有个隐藏前提：Claude Code 每次执行这些操作，背后都要调模型。原文用的是 Claude Code + DeepSeek V4，消耗 Token 约 ¥5。问题在于，Claude Code 默认的模型通道需要你自己配 Key 和 Base URL，否则要么用不了，要么走官方额度——而官方额度对高频调试场景来说，消耗速度很快。

具体痛点有三个：

1. Key 和 Base URL 需要手动接。Claude Code 不会自动帮你找通道，你得在配置里填。
2. 调试类操作消耗 Token 密集。排查setupDevPlatform()导致的 dev 404、遍历@cloudflare/next-on-pages版本适配、反复调整 Server/Client Component 边界，这些都不是一次成型，Token 消耗是持续的。
3. 通道切换不能影响工具链。Claude Code 仍然要负责改 Next.js 14、Tailwind、Cloudflare 适配器配置和代码，换通道只是换请求出口，不能把工具本身换掉。

所以这篇的目标很明确：把原文中 Claude Code + DeepSeek V4 消耗 Token 这段对应的模型通道，改到 TaoToken。改完之后，Claude Code 照常执行create-next-app、照常排查 dev 404、照常跑npx @cloudflare/next-on-pages做 Pages 构建验证，只是请求走 TaoToken。

二、TaoToken 前置：注册、创建 Key、确认 Base URL

在动 Claude Code 配置之前，先把 TaoToken 这边准备好。三步：

第一步：注册账号

打开 https://taotoken.net/?utm_source=taotoken_aicg_blog_end ，完成注册。这是官网入口，后续的 Key 管理、模型对话、Coding Plan 都在这个站内。

第二步：创建 API Key

注册完成后，进入 API Keys 页面创建一个 Key。这个 Key 就是后面要填进 Claude Code 配置里的YOUR_API_KEY。创建后先复制保存，页面刷新后不一定能再看到完整 Key。

• API Keys 管理页：https://taotoken.net/console/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite

第三步：确认 Base URL

TaoToken 的 API Base URL 是：

https://taotoken.net/api

注意两点：不带/v1，不加 UTM 参数。这个地址是给 Claude Code 的模型配置用的，不是给浏览器访问的，所以不要拼查询字符串。

如果你还想确认模型 ID 和可用模型列表，可以在模型对话页先试一下：

• 模型对话：https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=model_chat&utm_campaign=rewrite

关于长期编码场景：如果你不只是这一次搭站，而是打算长期用 Claude Code 做 Next.js + Cloudflare Pages 这类项目的持续开发，可以看一下 Coding Plan，比按量消耗更适合高频调试：

• Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding_plan&utm_campaign=rewrite

前置准备就这些。接下来是具体配置。

三、可复制配置：Claude Code 的 settings.json 怎么填

Claude Code 的模型配置走settings.json，环境变量用ANTHROPIC_*系列。这里要区分清楚：Claude Code 本身是 Anthropic 的工具，它的配置项名是ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY，但值填的是 TaoToken 的地址和 Key。

配置文件位置

Claude Code 的settings.json通常在用户目录下：

• macOS / Linux：~/.claude/settings.json
• Windows：%USERPROFILE%\.claude\settings.json

如果文件不存在，手动创建。

配置内容

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "YOUR_API_KEY" } }

把YOUR_API_KEY替换成你在 TaoToken API Keys 页面创建的那个 Key。ANTHROPIC_BASE_URL填https://taotoken.net/api，不带/v1，不加 UTM。

如果你用 CLI 方式启动

TaoToken 提供了 CLI 工具，标题涉及 CLI 场景时可以用：

npm i -g @taotoken/taotoken taotoken cc -k YOUR_API_KEY -u https://taotoken.net/api -m MODEL_ID

这里的-u是 API 地址，-m是模型 ID。模型 ID 可以在模型对话页或文档里确认。

• 接入文档：https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite

配置完后的效果

Claude Code 仍然在终端里跑，仍然负责：

• 执行npx create-next-app@14 xiaoniubuniu-web --typescript --tailwind --app
• 安装gray-matter、react-markdown、remark-gfm、react-syntax-highlighter、react-icons
• 安装@cloudflare/next-on-pages@1.13.15（注意版本适配，1.13.16 要求 next >= 14.3.0，但 Next.js 14 最新只到 14.2.35，所以锁定 1.13.15）
• 搭建content/blog、content/products、content/tools目录结构
• 写src/lib/blog.ts数据读取层
• 处理 Server Component 和 Client Component 边界
• 排查setupDevPlatform()导致的 dev 404
• 跑npx @cloudflare/next-on-pages做 Pages 构建验证

只是这些操作背后的模型请求，从原来的通道换到了 TaoToken。

四、验证请求：确认通道生效、工具链正常

配置改完，不要直接开新项目，先做最小验证。

验证一：Claude Code 能否正常发起请求

在终端里启动 Claude Code，随便问一个简单问题，比如让它解释一段代码。如果配置正确，请求会走 TaoToken，你能看到正常返回。如果报 401 或 403，说明 Key 有问题；如果报连接错误，说明 Base URL 填错了。

验证二：create-next-app能否正常执行

让 Claude Code 执行：

npx create-next-app@14 xiaoniubuniu-web --typescript --tailwind --app

这一步验证的是 Claude Code 的工具调用能力没受影响。它能正常跑命令、正常读输出、正常根据报错调整，就说明通道切换没有破坏工具链。

验证三：setupDevPlatform()导致的 dev 404 排查

这是原文踩过的坑。按照 Cloudflare 文档在next.config.mjs里加了：

if (process.env.NODE_ENV === "development") { await setupDevPlatform(); }

结果next dev时所有 JS/CSS chunk 全部 404。原因是setupDevPlatform()模拟了 Cloudflare Workers 的请求处理管道，拦截了 Next.js dev server 的静态文件路由。这个项目是纯静态站点，根本不需要 Workers 运行时。

解决方案是删掉这段，next.config.mjs最终只保留：

const nextConfig = { images: { unoptimized: true }, }; export default nextConfig;

让 Claude Code 帮你排查这个问题时，它需要读文件、改配置、重新跑 dev server。这个过程消耗 Token，但走 TaoToken 通道后，消耗可控。

验证四：npx @cloudflare/next-on-pages构建验证

npx @cloudflare/next-on-pages

输出目录是.vercel/output/static。这一步验证的是 Cloudflare Pages 构建链路正常。Claude Code 能正常执行这个命令并根据输出判断构建是否成功，就说明整条链路通了。

成功结果长什么样

• Claude Code 正常响应，无 401/403/连接错误
• create-next-app成功生成项目结构
• next dev本地访问正常，无 chunk 404
• npx @cloudflare/next-on-pages构建成功，输出.vercel/output/static
• Cloudflare Pages 构建配置：构建命令npx @cloudflare/next-on-pages，输出目录.vercel/output/static，兼容性标志nodejs_compat

五、本篇常见错排查

错误 1：Base URL 填成了https://taotoken.net/api/v1

TaoToken 的 Base URL 不带/v1。填成/api/v1会导致请求路径错误，报 404 或连接失败。正确写法是https://taotoken.net/api。

错误 2：Key 填错或过期

ANTHROPIC_API_KEY填的是 TaoToken API Keys 页面创建的 Key，不是 Anthropic 官方的 Key。如果报 401，先去 API Keys 页面确认 Key 是否有效、是否被删除。

• API Keys：https://taotoken.net/console/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite

错误 3：settings.json格式错误

JSON 文件对格式敏感。多一个逗号、少一个引号都会导致 Claude Code 读不到配置。建议用编辑器校验一下 JSON 格式。

错误 4：环境变量没生效

如果你是通过环境变量而不是settings.json配置的，确认变量名是ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY，并且是在启动 Claude Code 的同一个 shell 里设置的。改完环境变量后需要重启终端或重新 source 配置文件。

错误 5：setupDevPlatform()没删干净

排查 dev 404 时，确认next.config.mjs里没有残留的setupDevPlatform()调用。这个函数会拦截静态文件路由，纯静态站点不需要它。

错误 6：@cloudflare/next-on-pages版本选错

1.13.16 要求 next >= 14.3.0，但 Next.js 14 最新只到 14.2.35，14.3.0 这个版本号根本不存在。所以锁定 1.13.15。让 Claude Code 遍历适配器所有历史版本时，它会自己判断并锁定正确版本。

错误 7：Cloudflare Pages 构建配置填错

构建命令是npx @cloudflare/next-on-pages，输出目录是.vercel/output/static，兼容性标志是nodejs_compat。这三个值填错任何一个，构建都会失败。

错误 8：Server Component 和 Client Component 边界问题

fs模块不能出现在客户端组件里。如果客户端组件import { categoryLabels } from "@/lib/products"，webpack 会试图把整个products.ts打进客户端 bundle，包括import fs from "fs"，直接报错。解决方案是拆文件：src/lib/products.ts服务端专用，src/lib/product-constants.ts客户端安全。客户端组件只引product-constants，服务端组件引products。

六、语义一致 CTA：通道换完，继续搭站

回到标题的问题：Claude Code 搭 Next.js + Cloudflare Pages，模型通道改到 TaoToken 行不行？

行。配置就两步：ANTHROPIC_BASE_URL填https://taotoken.net/api，ANTHROPIC_API_KEY填 TaoToken 创建的 Key。改完之后，Claude Code 仍然负责改 Next.js 14、Tailwind、Cloudflare 适配器配置和代码，仍然能执行create-next-app、排查setupDevPlatform()导致的 dev 404、跑npx @cloudflare/next-on-pages做 Pages 构建验证。只是请求走 TaoToken。

如果你在配置过程中遇到问题，优先看这两个页面：

• 接入文档：https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite
• API Keys：https://taotoken.net/console/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite

如果你打算长期用 Claude Code 做 Next.js + Cloudflare Pages 这类项目的持续开发，高频调试场景下 Coding Plan 比按量消耗更合适：

• Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding_plan&utm_campaign=rewrite

通道换完，剩下的就是继续搭站。原文那套流程——Markdown 内容系统、SSG + JSON-LD、Cloudflare Pages 自动构建、git push 自动上线——都可以照常跑。