企业级官网全栈实战教程
技术栈：React 19 · TypeScript · Next.js(App Router) · Tailwind CSS · Axios · Headless UI · React Hook Form · Zod · i18n
目标 ：从 0 到 1 构建一个真实可落地的企业官网系统，包含用户注册 / 登录 / 多因素验证 / 用户中心 / 咨询功能，并具备企业级架构与可扩展性。
一、教程整体目标与读者定位
1.你将学到什么
-
如何设计 企业官网级别的前端架构
-
Next.js App Router + Server / Client Components 的最佳实践
-
Headless UI + RHF + Zod 打造 可维护表单系统
-
登录 / 注册 / 验证码 / 邮箱 & 短信验证的前端实现
-
国际化（i18n）在真实项目中的落地方式
-
Shadcn 风格设计系统的工程化实现
2.适合人群
-
有 React / TypeScript 基础
-
想做 真实业务项目而不是 Demo
-
想提升「架构能力」的前端工程师
二、系统功能总览
1.页面结构设计
┌──────────────── Header ───────────────┐
│ Logo | 产品 | 新闻 | 招聘 | 文档 | 登录 │
│ |
│ 登录后： │
│ [用户中心] | email***@xx.com ▼ │
└───────────────────────────────────────┘
┌─────────────── Main Content ────────────┐
│ 各业务页面 │
└─────────────────────────────────────────┘
┌──────────────── Footer ────────────────┐
│ 联系方式 | 地址 | 版权 | 语言切换 │
└────────────────────────────────────────┘2.功能模块拆分
-
官网展示（产品 / 新闻 / 招聘 / 文档）
-
用户注册（邮箱 / 手机 / 密码）
-
登录（账号密码 + 图形验证码）
-
邮箱验证 / 短信验证码
-
用户中心
-
基本信息（性别 / 年龄 / 地址）
-
登录设置
-
支付方式（银行卡信息）
-
-
咨询 / 联系我们表单
-
国际化多语言切换
三、整体技术架构设计
1.前端分层架构
app/
├─ (public)/ # 官网公开页面
├─ (auth)/ # 登录 / 注册
├─ (user)/ # 用户中心（需登录）
├─ api/ # Route Handlers
components/
├─ layout/ # Header / Footer
├─ form/ # Form 抽象层（RHF + Zod）
├─ ui/ # Headless UI / Shadcn 风格组件
lib/
├─ api/ # axios 封装
├─ auth/ # 登录态管理
├─ i18n/ # 国际化这是企业项目级别的结构，不是 Demo。
四、教程章节
第一篇：项目初始化与工程规范
-
Next.js App Router 初始化
-
TypeScript 严格模式
-
Tailwind + Shadcn 风格主题变量
-
ESLint / Prettier / 目录规范
第二篇：企业官网 Layout 架构设计
Header 实现要点
-
Logo + 主导航（产品 / 新闻 / 招聘 / 文档）
-
登录前 / 登录后状态切换
-
用户邮箱脱敏显示（
user***@xx.com） -
Headless UI Menu 实现用户下拉菜单
Footer
-
企业联系信息
-
版权信息
-
右下角语言切换
第三篇：国际化多语言系统设计
-
i18n 架构设计
-
语言切换组件
-
URL / Cookie / LocalStorage 同步
-
Header / Footer / 表单文案国际化
第四篇：登录与注册系统（核心篇）
注册流程设计
-
邮箱 + 手机号
-
密码强度校验
-
图形验证码
-
邮箱验证码 / 短信验证码
技术实现
-
React Hook Form + Zod 表单系统
-
Headless UI Input / Listbox / Switch
-
Axios 请求封装
第五篇：验证码系统（图形 / 邮箱 / 短信）
-
图形验证码组件设计
-
倒计时逻辑
-
防刷与 UX 优化
第六篇：登录态与权限控制
-
Cookie / Token 管理
-
Next.js Middleware 鉴权
-
受保护路由设计
第七篇：用户中心系统设计
页面模块
-
基本信息（性别 / 年龄 / 地址）
-
登录设置（修改密码）
-
支付方式（银行卡表单）
表单架构
-
Headless UI + RHF + Zod
-
Form 抽象层复用
第八篇：支付方式与敏感信息表单设计
-
银行卡号分段输入
-
信息脱敏显示
-
表单校验与安全提示
第九篇：咨询 / 联系我们功能
-
表单提交
-
服务端校验
-
成功 / 失败反馈
第十篇：Axios 与 API 架构设计
-
Axios 实例封装
-
请求 / 响应拦截器
-
错误码统一处理
第十一篇：UI 风格与 Shadcn 设计系统
-
Tailwind 主题变量
-
暗色 / 亮色模式
-
企业级组件规范
第十二篇：性能优化与生产部署
-
Server Components 优化
-
表单拆分与懒加载
-
Vercel 部署