选择正确的前端部署方式
静态站点、常驻 Node 服务和无服务器部署有不同能力边界。部署方式必须匹配页面是否需要服务端运行。
- 不再把“部署 Next.js”理解为只有一种固定方法。
- 静态导出、服务端运行和平台托管
- 为同一个产品分别写静态部署和服务端部署方案，并说明选择依据。
- 完成 4.5「Next.js：React 之上的生产级框架」
FOUNDATION
必须理解
静态站点、常驻 Node 服务和无服务器部署有不同能力边界。部署方式必须匹配页面是否需要服务端运行。
前端部署方式取决于代码需要在何时运行。纯静态文件、每次请求运行的服务器代码和按需执行的函数能力不同，选择错误会让动态数据或登录在生产环境失效。
静态部署像提前印好的宣传册，请求时服务器像现场接单制作，无服务器函数像有人来时才开工的共享厨房。成本与能力不同。
只有本地假数据的任务应用可以静态发布；加入服务端 API、数据库和登录后，需要支持 Next.js 服务端运行能力的平台。
静态导出、服务端运行和平台托管
构建时发生在发布之前，适合提前准备不常变的页面；请求时发生在用户访问的那一刻，可以读取实时数据和身份；浏览器运行时则处理用户设备上的交互。
基础概念
静态导出把站点变成可直接提供的 HTML、CSS 和 JavaScript；常驻服务持续运行服务端进程；平台托管或无服务器环境按请求调度应用能力。
进一步理解
静态方案简单、缓存友好，却没有任意请求时服务端逻辑。常驻进程能力完整但需维护运行环境。托管平台隐藏部分运维，仍有运行时、时长和区域限制。
部署方式应由认证、实时数据、API、成本和团队运维能力决定，而不是只看哪条命令最短。
公开课程可静态生成；包含用户任务、登录和服务端写入的应用需要能够在请求时执行可信代码与访问数据库。
“无服务器”不是没有服务器，而是服务器生命周期和扩缩容由平台管理；代码仍在某个受限运行环境中执行。
这一小节记住：先列出产品必须具备的运行能力，再选择承载方式。
构建时、请求时与浏览器运行时
静态导出最后只有 HTML、CSS 和 JavaScript 文件，没地方长期执行任意服务端逻辑。常驻 Node 服务一直运行，无服务器平台则在有请求时帮你启动函数。
基础概念
构建时发生在发布前，请求时发生在服务器收到访问时，浏览器运行时发生在用户设备加载页面后。变量和代码所在阶段决定它能访问哪些数据与 API。
进一步理解
构建时适合生成公开内容；请求时能读取会话、秘密和最新数据；浏览器能处理点击、DOM 和设备 API，却无法安全保管服务端凭证。
同一源码可能跨多个阶段执行。必须追踪某个值最终是否进入客户端包，而不是只根据文件名猜测安全性。
课程目录在构建时生成，个人任务在请求时按用户查询，筛选按钮在浏览器中更新 URL 和界面。
环境变量出现在服务端代码中不自动保证安全；如果它被注入客户端构建或作为 props 返回，用户仍能看到。
这一小节记住：判断代码能力与秘密边界时，先确认它实际在哪个阶段运行。
环境变量、预览环境和生产环境
开发、预览和生产应该有各自的环境变量。凡是进入客户端代码的值，用户都有办法看到；数据库地址、密钥和令牌只能留在服务端。
基础概念
环境变量是运行环境提供给程序的配置值；开发、预览和生产是相互独立的部署环境，应拥有明确且受控的配置。
进一步理解
开发使用本地服务与测试数据，预览用于验证候选版本，生产承载真实用户。变量名称可一致，实际地址与凭证应分开。
公开前端变量会被打进浏览器资源，任何访问者都能读取。数据库 URL、服务端令牌和私钥只能在可信运行环境使用，并通过平台秘密管理。
预览任务应用连接测试数据库，生产连接真实数据库；客户端只得到公开 API 地址，不得到数据库凭证。
`.env` 文件只是本地配置载体，不等于安全机制；提交到 Git 或打印进日志后，变量仍会泄露。
这一小节记住：按环境分离配置，并按最终运行位置判断变量能否公开。
AI COLLABORATION
AI 如何参与
让 AI 根据动态数据、认证、API 和成本约束推荐部署模式，并列出被放弃的能力。
推荐协作顺序
- 1
把应用需要的动态能力逐条告诉 AI，而不是先报平台名字。
- 2
让它标出每项能力发生在构建、服务器还是浏览器。
- 3
根据结果比较部署方式，并写清选择后失去的能力。
任务应用未来需要 PostgreSQL、登录和服务端 API。请比较静态托管、常驻 Node 服务、支持 Next.js 的托管平台三种方式。按“是否支持服务端代码、环境变量、数据库连接、预览环境、回滚”制表，并推荐最小可行方案。
根据产品能力选择运行模式，而不是只比较平台热度；明确静态导出的能力边界。
人工检查清单
- 确认秘密变量不会写进 NEXT_PUBLIC_ 前缀，平台建议支持当前 Next.js 版本和所需运行方式。
- 让 AI 根据认证、数据新鲜度和服务端能力列出可行部署模式及被放弃的能力。
- 在预览与生产分别验证关键变量、动态路由和真实请求，确认没有依赖本地隐含环境。
COMMON TRAPS
常见误区
错误不是需要隐藏的失败，而是帮助你看清系统边界的证据。下面三类问题在 AI 辅助学习中最常出现。
有服务器功能却强行静态导出
- 你会看到
- 首页能打开，登录、实时数据或 API 在生产环境不可用。
- 为什么发生
- 为了得到静态文件而关闭服务端能力，会让登录、个性化和写操作在生产中失去可信执行位置。
- 怎样纠正
- 先列运行时需求，再选择支持对应服务端能力的部署方式。
把秘密当普通前端变量
- 你会看到
- 数据库地址用了公开前缀，被打进浏览器 JavaScript。
- 为什么发生
- 本地变量和开发服务天然存在，容易被当成平台也会自动提供，部署后才暴露缺失。
- 怎样纠正
- 只有用户设备确实需要的值才能公开；凭证只留在服务器环境。
预览环境和生产共用数据
- 你会看到
- 测试页面误改了真实用户记录。
- 为什么发生
- 变量带有“环境”二字不代表保密，进入客户端包的任何值都属于公开数据。
- 怎样纠正
- 为开发、预览和生产分别配置数据与秘密。
HANDS-ON
动手任务
为同一个产品分别写静态部署和服务端部署方案，并说明选择依据。
- 完成 4.5「Next.js：React 之上的生产级框架」
跟着做
- 01
列出任务应用当前所有运行时能力。
- 02
分别标注它们发生在构建、服务器请求或浏览器。
- 03
判断当前版本能否静态导出，并写出理由。
- 04
为未来数据库版本选择支持服务端运行的平台。
- 05
建立预览与生产检查表，注明环境变量和回滚。
不再把“部署 Next.js”理解为只有一种固定方法。
解释为什么把数据库密码写入前端环境变量，即使页面不显示它也不安全。
离开本课前，自问四件事
- 静态导出、常驻服务和无服务器托管各自能做什么？
- 构建时、请求时和浏览器运行时分别可以安全访问哪些信息？
- 为什么开发、预览和生产需要分离配置与数据？
- 我如何判断一个环境变量最终是否会暴露给用户？
确认完成后，会同步更新学习中心的课程学习进度。