技术实现 - iFlux Docs

技术栈

类别	技术
框架	Next.js 16 App Router
UI 组件	shadcn/ui（@base-ui/react）
样式系统	Tailwind CSS v4 + OKLCH CSS 变量
暗色模式	next-themes，class 策略
聊天 AI	@ai-sdk/react，流式响应

架构特性

Server Component 优先 — 默认无客户端 JS 开销
内置 AI 聊天助手 — 全站集成 AI 面板
全站暗色模式 — 跟随系统，持久化偏好
响应式布局 — 桌面/平板/移动端自适应
SEO 优化 — JSON-LD 结构化数据、Open Graph 标签

组件系统

Hero — 首页 Hero 区，支持 fullscreen/minimal/split 三种变体
SectionShell — 统一的分区容器，内置 spacing token
AppPanel — 统一侧边面板（搜索、站点链接、音乐播放器）
PostHero — 文章详情页分栏展示组件

性能

PPR（Partial Prerendering）静态 + 动态混合渲染
图片自动优化（next/image）
字体预加载（Geist 字体族）