Next.js
Next.js 是基于 React 的网站与 Web 应用框架,提供页面路由、服务端处理和构建能力。它帮你把页面展示与数据获取组织在同一个项目里,例如制作带公开介绍页和登录后工作台的 AI 工具。
你可能会说:「我想做一个有公开介绍页和登录后工作台的网站,页面和接口最好放在同一个项目里。」
动手看看AI 工具的介绍页与工作台
用户打开 AI 工具的介绍页。Next.js 根据请求路径找到对应页面,交给服务端准备内容。
要点Next.js 帮你处理哪些事?
- 1
用页面结构组织访问路径
你用 React 写界面时,还得决定用户访问不同网址会看到什么。Next.js 提供路由机制,让页面与访问路径对应起来,做产品介绍页、定价页和用户工作台时就不用从头搭这层结构。
- 2
按页面需要选择渲染方式
公开内容可以预先生成,变化频繁的内容可以在请求时由服务端生成,也可以让浏览器获取数据后更新。因为页面需求不同,所以不能把“用了 Next.js”直接理解成“所有页面都在服务端渲染”。
- 3
把部分服务端逻辑放进项目
比如 AI 工具需要调用第三方接口,你可以在项目的服务端代码中处理请求,让密钥留在服务端。这样前端页面不用直接携带密钥;但数据存储、权限和部署仍要按产品需求设计。
容易混淆的地方
React 主要负责构建界面,Next.js 在它的基础上加入路由、渲染和服务端处理等能力,所以两者不是二选一。Node.js 则是 JavaScript 的运行环境,不负责规定网站页面怎么组织;Next.js 的服务端功能可以运行在相应的部署环境中。
什么时候用
适合用
- 做同时包含公开介绍页、文章页和登录后工作台的 Web 产品,想在一个项目里管理页面与数据获取。
- 做 AI 工具网站,需要展示交互界面,并由服务端代为调用第三方 API,避免在浏览器中暴露密钥。
- 团队已用 React 开发,准备做多个访问路径不同、数据更新方式也不同的页面。
不适合用
- 只做一个内容固定、几乎没有交互的单页介绍站时,普通 HTML 和 CSS 或静态站点工具可能更省事。
- 项目只是提供接口、不提供网站界面时,选后端框架来实现 API 通常更直接。
- 已有运行稳定的 Vue 应用,只为获得页面路由而考虑重写时,先用现有生态的路由方案更合适。
练一练选一个答案,看看解释
你在做一个 AI 写作网站:公开页面介绍功能,登录后用户提交内容生成草稿。第三方模型密钥不能出现在浏览器里。哪种方案更符合 Next.js 的用途?
让 AI 帮你做复制给 AI Agent 直接用
请用 Next.js 和 React 实现一个 AI 写作网站原型:包含公开介绍页和登录后的工作台。工作台通过项目的服务端接口调用模型,不把 API 密钥发到浏览器;先列出页面路径、数据流和需要配置的环境变量,再开始写代码。