跳到正文

Next.js

中级网页

Next.js 是基于 React 的网站与 Web 应用框架,提供页面路由、服务端处理和构建能力。它帮你把页面展示与数据获取组织在同一个项目里,例如制作带公开介绍页和登录后工作台的 AI 工具。

你可能会说:「我想做一个有公开介绍页和登录后工作台的网站,页面和接口最好放在同一个项目里。」

读之前建议先了解

动手看看

介绍页匹配页面浏览器页面路由公开页面服务端处理项目数据库无需取数
1

用户打开 AI 工具的介绍页。Next.js 根据请求路径找到对应页面,交给服务端准备内容。

要点

  1. 1

    用页面结构组织访问路径

    你用 React 写界面时,还得决定用户访问不同网址会看到什么。Next.js 提供路由机制,让页面与访问路径对应起来,做产品介绍页、定价页和用户工作台时就不用从头搭这层结构。

  2. 2

    按页面需要选择渲染方式

    公开内容可以预先生成,变化频繁的内容可以在请求时由服务端生成,也可以让浏览器获取数据后更新。因为页面需求不同,所以不能把“用了 Next.js”直接理解成“所有页面都在服务端渲染”。

  3. 3

    把部分服务端逻辑放进项目

    比如 AI 工具需要调用第三方接口,你可以在项目的服务端代码中处理请求,让密钥留在服务端。这样前端页面不用直接携带密钥;但数据存储、权限和部署仍要按产品需求设计。

容易混淆的地方

React 主要负责构建界面,Next.js 在它的基础上加入路由、渲染和服务端处理等能力,所以两者不是二选一。Node.js 则是 JavaScript 的运行环境,不负责规定网站页面怎么组织;Next.js 的服务端功能可以运行在相应的部署环境中。

什么时候用

适合用

  • 做同时包含公开介绍页、文章页和登录后工作台的 Web 产品,想在一个项目里管理页面与数据获取。
  • 做 AI 工具网站,需要展示交互界面,并由服务端代为调用第三方 API,避免在浏览器中暴露密钥。
  • 团队已用 React 开发,准备做多个访问路径不同、数据更新方式也不同的页面。

不适合用

  • 只做一个内容固定、几乎没有交互的单页介绍站时,普通 HTML 和 CSS 或静态站点工具可能更省事。
  • 项目只是提供接口、不提供网站界面时,选后端框架来实现 API 通常更直接。
  • 已有运行稳定的 Vue 应用,只为获得页面路由而考虑重写时,先用现有生态的路由方案更合适。

练一练

你在做一个 AI 写作网站:公开页面介绍功能,登录后用户提交内容生成草稿。第三方模型密钥不能出现在浏览器里。哪种方案更符合 Next.js 的用途?

让 AI 帮你做

请用 Next.js 和 React 实现一个 AI 写作网站原型:包含公开介绍页和登录后的工作台。工作台通过项目的服务端接口调用模型,不把 API 密钥发到浏览器;先列出页面路径、数据流和需要配置的环境变量,再开始写代码。

接下来学什么