架构

iflux-next 架构设计

基于 Next.js 16 + React 19 + TypeScript 6 的 monorepo 项目，每个产品可独立部署。

2026-05-03625 字2 分钟

iflux-next 是一个面向独立开发者的 SaaS 产品集合。每个产品都可以独立部署、独立迭代。

为什么选择 Monorepo？

作为独立开发者，你需要在多个产品之间共享代码 — UI 组件、工具函数、认证逻辑、数据库 schema。Monorepo 让你：

共享基础设施：一套 UI 组件库、一套工具函数、一套认证方案
独立部署：每个应用有自己的 package.json，可以单独发布
零耦合：应用之间不互相依赖，只通过 packages/ 共享

目录结构

text

apps/  web/          # 企业官网  blog/         # 博客系统（MDX 驱动）  docs/         # 文档站（MDX 驱动）  links/        # 链接管理（跨平台）  studio/       # AI 创作平台（跨平台）packages/  ui/           # shadcn/ui 组件库（@base-ui/react），含 AI/Auth/Layout/Admin 模块  utils/        # 工具函数（cn、frontmatter 解析、计数、Supabase 客户端）  next-config/  # 共享 Next.js 配置（安全 headers、CSP）  typescript-config/ # TypeScript 共享配置

跨平台方案

links 和 studio 采用 core/ 目录分离平台无关逻辑：

text

apps/links/  core/              # 平台无关核心逻辑（目前为占位）  web/               # Next.js Web 版本  mobile/            # 移动端（占位）  desktop/           # 桌面端（占位）  browser-extension/ # 浏览器插件（占位）

平台特定代码只包含 UI 和 API 适配，业务逻辑全部放在 core/ 中。

详细说明请参考跨平台方案选型。

技术栈

类别	技术	版本
框架	Next.js	16.2.10
UI	React	19.2.7
语言	TypeScript	6.0.3
样式	Tailwind CSS	4.3.2
组件库	shadcn (base-rhea) + @base-ui/react	-
图标	lucide-react	1.23.0
暗色模式	next-themes	0.4.6
Lint/Format	Biome	2.5.2
包管理	Bun	-
Monorepo	Turborepo	2.10.3
单元测试

开发工作流

跨包开发

修改 packages/ui 或 packages/utils 中的代码，消费方应用通过 bun dev 自动热更新（Turborepo 处理依赖）。

新增应用

在 apps/ 下创建目录
复制已有应用的 package.json、next.config.mjs、tsconfig.json 作为模板
在根 package.json 的 workspaces 中注册

质量保障

pre-commit：lint-staged → typecheck → unit-test
CI：lint → typecheck → unit test → E2E test → build

组件开发规范

Server Component 优先：默认不使用 "use client"
仅在需要 hooks、事件处理器、浏览器 API 时添加 "use client"
交互逻辑抽离到独立 Client Component
使用 cn() 合并 Tailwind 类名（clsx + tailwind-merge）

下一步

接下来我们会逐步完善每个产品的内容，从 web 开始，然后是 blog、docs，最后是 links 和 studio 的跨平台实现。

如果你对某个部分感兴趣，欢迎在 GitHub 上关注项目进展。

开发文档

1 / 16

1.iflux-next 架构设计 2.Next.js 3.React 4.TypeScript 5.Tailwind CSS 6.shadcn/ui 7.Biome 8.Turborepo 9.创建应用 10.添加组件 11.开发规范 12.Frontmatter 用法与规范 13.嵌入式 Playground 14.Twoslash 类型提示 15.部署指南 16.环境变量

Next.js

为什么选择 Monorepo？

作为独立开发者，你需要在多个产品之间共享代码 — UI 组件、工具函数、认证逻辑、数据库 schema。Monorepo 让你：

共享基础设施：一套 UI 组件库、一套工具函数、一套认证方案

独立部署：每个应用有自己的 package.json，可以单独发布

零耦合：应用之间不互相依赖，只通过 packages/ 共享

目录结构

text

apps/  web/          # 企业官网  blog/         # 博客系统（MDX 驱动）  docs/         # 文档站（MDX 驱动）  links/        # 链接管理（跨平台）  studio/       # AI 创作平台（跨平台）packages/  ui/           # shadcn/ui 组件库（@base-ui/react），含 AI/Auth/Layout/Admin 模块  utils/        # 工具函数（cn、frontmatter 解析、计数、Supabase 客户端）  next-config/  # 共享 Next.js 配置（安全 headers、CSP）  typescript-config/ # TypeScript 共享配置

跨平台方案

links 和 studio 采用 core/ 目录分离平台无关逻辑：

text

apps/links/  core/              # 平台无关核心逻辑（目前为占位）  web/               # Next.js Web 版本  mobile/            # 移动端（占位）  desktop/           # 桌面端（占位）  browser-extension/ # 浏览器插件（占位）

平台特定代码只包含 UI 和 API 适配，业务逻辑全部放在 core/ 中。

类别

技术

版本

框架

Next.js

16.2.10

React

19.2.7

语言

TypeScript

6.0.3

样式

Tailwind CSS

4.3.2

组件库

shadcn (base-rhea) + @base-ui/react

图标

lucide-react

1.23.0

暗色模式

next-themes

0.4.6

Lint/Format

Biome

2.5.2

包管理

Bun

Monorepo

Turborepo

2.10.3

单元测试

开发工作流

跨包开发

修改 packages/ui 或 packages/utils 中的代码，消费方应用通过 bun dev 自动热更新（Turborepo 处理依赖）。

新增应用

在 apps/ 下创建目录

复制已有应用的 package.json、next.config.mjs、tsconfig.json 作为模板

在根 package.json 的 workspaces 中注册

质量保障

pre-commit：lint-staged → typecheck → unit-test

CI：lint → typecheck → unit test → E2E test → build