1. 为什么你的 Next.js 页面还是“死”的很多人用 Claude Code 写 Next.js 项目写出来的页面确实好看渐变背景、圆角卡片、响应式布局但打开一看数据全是写死的。输入框敲进去一个城市名点按钮没反应或者刷新一下数据就没了。问题不在 UI在于页面没有和外部世界建立连接。所谓让网页“动”起来核心就一件事前端能发起请求、拿到真实数据、再把数据渲染到界面上。Next.js 提供了 Server Component、Route Handler、Client Component 几种模式axios 又是前端最顺手的请求库OpenWeather 则是一个非常适合练手的公开数据源。三者串起来就是一个完整的动态链路。但真正卡住新手的往往不是 axios 怎么写而是 Claude Code 环境下的 Key 和 API 通道怎么统一。你在本地.env.local里塞了一个 KeyClaude Code 在生成代码时又建议你换一个变量名跑起来就报 401。这篇就把这条链路从头到尾走一遍包括 Claude Code 的settings.json、项目里的config.toml骨架、TaoToken 的接入方式以及 axios 请求验证和页面动态渲染的检查动作。适合已经会写基础 Next.js 页面、想让项目真正接上外部数据的开发者。2. 前置准备TaoToken 统一 Key 与 API 通道在动手写 axios 之前先把“通道”这件事理清楚。Claude Code 本身是一个编码助手它生成的代码需要调用外部 API而 OpenWeather 这类服务又需要 Key。如果每个服务都单独配一套 Key、单独记一个 base URL项目一多就会乱。TaoToken 在这里扮演的角色是提供一个统一的 API 接入入口让你在 Claude Code 里配置一次后续切换模型或服务时不用反复改代码。先拿到访问凭证。打开官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册后在控制台里创建一个 API Key。这个 Key 就是你后续在 Claude Code 和项目里统一使用的凭证。控制台地址是 https://taotoken.net/console 创建 Key 的页面在 https://taotoken.net/api-keys 。拿到 Key 之后建议先做一次模型对话验证确认通道是通的。打开 https://taotoken.net/models 随便选一个模型发一句“你好”能正常返回就说明 Key 和通道都没问题。这一步看起来多余但能帮你排除掉后面 90% 的“到底是 Key 错了还是代码错了”的纠结。如果你打算长期用 Claude Code 做编码和 Agent 任务可以了解一下 Coding Planhttps://taotoken.net/coding-plan 。它更适合高频调用场景不用每次单独计费。接入文档在 https://taotoken.net/doc 遇到参数不确定的时候翻一下比猜要快。注意Key 只放在服务端环境变量里不要写进任何会提交到 Git 的文件。Next.js 里以NEXT_PUBLIC_开头的变量会被打包进浏览器Key 绝对不能加这个前缀。3. 可复制配置settings.json 与 config.toml 骨架Claude Code 的配置分两层一层是 Claude Code 自身的settings.json决定它用哪个 API 通道另一层是项目里的config.toml用来管理项目级的参数。两层都配好后面写代码才不会出现“Claude 生成的代码用的 Key 和实际环境对不上”的情况。先看 Claude Code 的settings.json。这个文件一般放在用户配置目录下不同系统路径不同但内容结构一致{ apiKey: 你的_TaoToken_API_Key, baseUrl: https://taotoken.net/api, model: claude-sonnet-4-20250514, maxTokens: 8192, temperature: 0.7 }这里baseUrl填https://taotoken.net/api不要加任何多余路径。apiKey就是你刚才在控制台创建的那串字符。model按你实际可用的模型填不确定就去模型对话页面确认一下。再看项目里的config.toml。这个文件放在项目根目录用来集中管理天气 API 相关的配置避免散落在各个文件里[app] name weather-next version 0.1.0 [weather] provider openweather base_url https://api.openweathermap.org/data/2.5/weather units metric lang zh_cn timeout_ms 8000 [taotoken] base_url https://taotoken.net/api model claude-sonnet-4-20250514config.toml本身不会被 Next.js 自动读取它的作用是给你和 Claude Code 一个统一的“参数真相源”。当你在 Claude Code 里说“按 config.toml 里的 weather 配置生成请求逻辑”时它就不会乱编参数。项目环境变量文件.env.local这样写OPENWEATHER_KEY你的_OpenWeather_Key TAOTOKEN_API_KEY你的_TaoToken_API_Key TAOTOKEN_BASE_URLhttps://taotoken.net/apiOpenWeather 的 Key 去它官网免费申请即可免费额度对练手完全够用。注意OPENWEATHER_KEY没有NEXT_PUBLIC_前缀因为它只在服务端 Route Handler 里用。4. 用 axios 打通请求链路并验证配置就绪后开始写真正的请求逻辑。Next.js 的 App Router 模式下推荐把外部请求放在 Route Handler 里前端只请求自己的/api/weather这样 Key 不会暴露到浏览器。先安装依赖npm install axios然后在app/api/weather/route.js里写服务端请求import axios from axios; import { NextResponse } from next/server; export async function GET(request) { const { searchParams } new URL(request.url); const city searchParams.get(city); if (!city) { return NextResponse.json({ error: 缺少城市名 }, { status: 400 }); } try { const response await axios.get( https://api.openweathermap.org/data/2.5/weather, { params: { q: city, appid: process.env.OPENWEATHER_KEY, units: metric, lang: zh_cn, }, timeout: 8000, } ); const data response.data; return NextResponse.json({ city: data.name, temp: data.main.temp, desc: data.weather[0].description, humidity: data.main.humidity, }); } catch (error) { if (error.response?.status 404) { return NextResponse.json({ error: 城市未找到 }, { status: 404 }); } return NextResponse.json({ error: 请求失败 }, { status: 500 }); } }这段代码有几个关键点。appid从服务端环境变量读取不会进浏览器。timeout设了 8 秒避免请求卡死。错误处理区分了 404 和其他错误前端可以据此显示不同提示。前端页面app/page.js用 Client Component 来触发请求和渲染use client; import { useState } from react; import axios from axios; export default function Home() { const [city, setCity] useState(); const [weather, setWeather] useState(null); const [error, setError] useState(); const [loading, setLoading] useState(false); const fetchWeather async () { if (!city.trim()) return; setLoading(true); setError(); setWeather(null); try { const res await axios.get(/api/weather, { params: { city: city.trim() }, }); setWeather(res.data); } catch (err) { setError(err.response?.data?.error || 请求出错); } finally { setLoading(false); } }; return ( main classNamemin-h-screen flex flex-col items-center justify-center gap-6 p-8 div classNameflex gap-2 input value{city} onChange{(e) setCity(e.target.value)} placeholder输入城市名如 Beijing classNameborder rounded-lg px-4 py-2 / button onClick{fetchWeather} classNamebg-blue-600 text-white rounded-lg px-4 py-2 查询 /button /div {loading p加载中.../p} {error p classNametext-red-500{error}/p} {weather ( div classNamerounded-2xl shadow-lg p-6 bg-gradient-to-br from-blue-50 to-white h2 classNametext-xl font-bold{weather.city}/h2 p classNametext-3xl{weather.temp}°C/p p{weather.desc}/p p classNametext-sm text-gray-500湿度 {weather.humidity}%/p /div )} /main ); }启动项目npm run dev打开http://localhost:3000输入Beijing点查询。如果看到温度、天气描述、湿度都出来了说明整条链路是通的。5. 验证请求与动态渲染的检查动作页面能跑不代表链路没问题。下面这几个检查动作建议每次改完请求逻辑都过一遍。第一个检查直接打 Route Handler。在浏览器或终端里访问curl http://localhost:3000/api/weather?cityShanghai正常应该返回一段 JSON包含city、temp、desc、humidity。如果返回{error:请求失败}说明服务端到 OpenWeather 这一段有问题先检查.env.local里的OPENWEATHER_KEY是否生效。改完.env.local必须重启npm run devNext.js 不会热更新环境变量。第二个检查看浏览器 Network 面板。点查询按钮后应该看到一个/api/weather?cityBeijing的请求状态码 200响应体是 JSON。如果状态码是 500看服务端终端有没有报错如果是 404说明城市名拼错了或者 OpenWeather 那边没匹配到。第三个检查确认 Key 没有泄漏。在浏览器里查看页面源代码搜索你的 OpenWeather Key 或 TaoToken Key应该搜不到。如果搜到了说明你不小心用了NEXT_PUBLIC_前缀赶紧改掉并重新生成 Key。第四个检查Claude Code 通道是否一致。在 Claude Code 里让它“读取 config.toml 并解释 weather 段的参数”如果它能正确读出base_url、units、lang说明 Claude Code 的settings.json和项目配置是对齐的。如果它读出来的参数和你写的不一样检查settings.json里的baseUrl是不是https://taotoken.net/api。6. 本篇常见错排查报错 401 Unauthorized最常见的原因是 Key 没生效。先确认.env.local里OPENWEATHER_KEY没有多余空格或引号再确认重启了 dev server。如果用的是 TaoToken 通道调模型检查settings.json里的apiKey是否和控制台创建的一致。报错 404 city not foundOpenWeather 对城市名比较敏感中文城市名有时匹配不到。试试用拼音比如Beijing而不是北京。如果一定要中文可以在请求参数里加langzh_cn但城市名本身还是建议用英文或拼音。页面一直显示“加载中”大概率是请求超时或没进 catch。检查axios.get的timeout设置以及 Route Handler 里有没有漏掉return。另外确认前端请求的是/api/weather而不是直接请求 OpenWeather 的域名直接请求会跨域。Claude Code 生成的代码用了 fetch 而不是 axios这不算错但如果你项目里统一用 axios可以在提示词里明确说“用 axios不要用 fetch”。Claude Code 会按你的偏好调整。改了 config.toml 但代码没变化config.toml不是自动加载的它只是给人和 Claude Code 看的参考文件。真正生效的是.env.local和代码里的硬编码参数。如果你想让 config.toml 真正驱动代码需要自己写一个读取逻辑比如用toml包解析后注入。TaoToken 通道返回模型不存在去 https://taotoken.net/models 确认当前可用的模型名称settings.json里的model字段必须和列表里的一致。模型名称区分大小写和版本号。如果你在接入过程中遇到请求链路的问题优先看 API Keys 页面确认 Key 状态https://taotoken.net/api-keys 再对照接入文档检查参数https://taotoken.net/doc 。需要验证模型通道是否正常直接去模型对话页面发一条消息最快https://taotoken.net/models 。长期做编码和 Agent 任务的话Coding Plan 比单次调用更省心https://taotoken.net/coding-plan 。