创建应用

本指南介绍如何在 apps/ 目录下创建新的子应用。

应用类型

仅 Web 应用

适用于不需要跨平台的独立产品（如 web、blog、docs）：

text

apps/my-app/  src/    app/              # Next.js App Router    ├── layout.tsx    └── page.tsx    components/       # 应用专属组件    lib/              # 工具函数  next.config.mjs  package.json  postcss.config.mjs  tsconfig.json

跨平台应用

适用于需要支持多平台的产品（如 links、studio）：

text

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

创建步骤

1. 创建目录结构

bash

# Web-only 应用mkdir -p apps/my-app/src/appmkdir -p apps/my-app/src/componentsmkdir -p apps/my-app/src/lib# 跨平台应用mkdir -p apps/my-product/core/srcmkdir -p apps/my-product/web/src/appmkdir -p apps/my-product/mobilemkdir -p apps/my-product/desktopmkdir -p apps/my-product/browser-extension

2. 配置 package.json

json

{  "name": "@iflux/my-app",  "version": "0.0.0",  "private": true,  "scripts": {    "dev": "next dev",    "build": "next build",    "start": "next start",    "typecheck": "tsc --noEmit"  },  "dependencies": {    "@iflux/ui": "workspace:*",

3. 配置 next.config.mjs

参考已有应用的 next.config.mjs，使用 withIfluxDefaults() 共享配置：

mjs

import { withIfluxDefaults } from "@workspace/next-config"const nextConfig = withIfluxDefaults({ ... })export default nextConfig

4. 配置 tsconfig.json

json

{  "extends": "@workspace/typescript-config/nextjs.json",  "compilerOptions": {    "paths": {      "@/*": ["./src/*"]    }  }}

5. 更新 workspace 配置

如果应用在 apps/ 下直接添加，根 package.json 的 workspaces 已包含 "apps/*"，无需额外配置。

6. 创建基础布局

tsx

import type { Metadata } from "next"export const metadata: Metadata = {  title: "My App",  description: "应用描述",}export default function RootLayout({  children,}: {  children: React.ReactNode}) {  return (    <html lang

共享依赖

所有应用都可以引用以下共享包：

包	用途
`@iflux/ui`	shadcn/ui 组件库（AI/Auth/Layout/Admin 模块）
`@iflux/utils`	工具函数（cn、frontmatter 解析、计数、Supabase 客户端）
`@iflux/next-config`	共享 Next.js 配置（安全 headers、CSP）
`@workspace/typescript-config`	共享 TypeScript 配置

端口分配

开发服务器默认端口：

应用	端口
web	3000
blog	3001
docs	3002
links	3003
studio	3004

新应用依次递增。

本指南介绍如何在 apps/ 目录下创建新的子应用。

应用类型

仅 Web 应用

适用于不需要跨平台的独立产品（如 web、blog、docs）：

text

apps/my-app/  src/    app/              # Next.js App Router    ├── layout.tsx    └── page.tsx    components/       # 应用专属组件    lib/              # 工具函数  next.config.mjs  package.json  postcss.config.mjs  tsconfig.json

跨平台应用

适用于需要支持多平台的产品（如 links、studio）：

text

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

创建步骤

1. 创建目录结构

bash

# Web-only 应用mkdir -p apps/my-app/src/appmkdir -p apps/my-app/src/componentsmkdir -p apps/my-app/src/lib# 跨平台应用mkdir -p apps/my-product/core/srcmkdir -p apps/my-product/web/src/appmkdir -p apps/my-product/mobilemkdir -p apps/my-product/desktopmkdir -p apps/my-product/browser-extension

2. 配置 package.json

json

{  "name": "@iflux/my-app",  "version": "0.0.0",  "private": true,  "scripts": {    "dev": "next dev",    "build": "next build",    "start": "next start",    "typecheck": "tsc --noEmit"  },  "dependencies": {    "@iflux/ui": "workspace:*",

3. 配置 next.config.mjs

参考已有应用的 next.config.mjs，使用 withIfluxDefaults() 共享配置：

mjs

import { withIfluxDefaults } from "@workspace/next-config"const nextConfig = withIfluxDefaults({ ... })export default nextConfig

4. 配置 tsconfig.json

json

{  "extends": "@workspace/typescript-config/nextjs.json",  "compilerOptions": {    "paths": {      "@/*": ["./src/*"]    }  }}

5. 更新 workspace 配置

如果应用在 apps/ 下直接添加，根 package.json 的 workspaces 已包含 "apps/*"，无需额外配置。

6. 创建基础布局

tsx

import type { Metadata } from "next"export const metadata: Metadata = {  title: "My App",  description: "应用描述",}export default function RootLayout({  children,}: {  children: React.ReactNode}) {  return (    <html lang

共享依赖

所有应用都可以引用以下共享包：

包	用途
`@iflux/ui`	shadcn/ui 组件库（AI/Auth/Layout/Admin 模块）
`@iflux/utils`	工具函数（cn、frontmatter 解析、计数、Supabase 客户端）
`@iflux/next-config`	共享 Next.js 配置（安全 headers、CSP）
`@workspace/typescript-config`	共享 TypeScript 配置

端口分配

开发服务器默认端口：

应用	端口
web	3000
blog	3001
docs	3002
links	3003
studio	3004

新应用依次递增。

应用类型

仅 Web 应用

跨平台应用

创建步骤

1. 创建目录结构

2. 配置 package.json

3. 配置 next.config.mjs

4. 配置 tsconfig.json

5. 更新 workspace 配置

6. 创建基础布局

共享依赖

端口分配

开发文档

应用类型

仅 Web 应用

跨平台应用

创建步骤

1. 创建目录结构

2. 配置 package.json

3. 配置 next.config.mjs

4. 配置 tsconfig.json

5. 更新 workspace 配置

6. 创建基础布局

共享依赖

端口分配