返回 Blog
Next.js

用 /api/hello 渲染 Hello Next.js

记录本站首页如何通过 Route Handler 提供数据,再用 SWR 在客户端请求并渲染 Hello Next.js。

本站首页保留了导航栏,但主体内容只渲染 Hello Next.js。这个文字不是直接写死在页面里,而是由 /api/hello 返回给前端。

Route Handler 放在 app/api/hello/route.ts 中,它负责返回 JSON 数据。页面再用 SWR 请求这个接口,所以浏览器的 Network 面板里可以看到 /api/hello 这次请求。

这种写法适合练习前后端在同一个 Next.js 项目里的配合:接口负责数据,客户端组件负责请求状态,页面只关心最终显示什么。