本指南介绍如何在 apps/ 目录下创建新的子应用。
适用于不需要跨平台的独立产品(如 web、blog、docs):
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):
apps/my-product/
core/ # 平台无关核心逻辑
src/
package.json
web/ # Next.js Web 版本
src/
package.json
mobile/ # 移动端(占位)
desktop/ # 桌面端(占位)
browser-extension/ # 浏览器插件(占位)# Web-only 应用
mkdir -p apps/my-app/src/app
mkdir -p apps/my-app/src/components
mkdir -p apps/my-app/src/lib
# 跨平台应用
mkdir -p apps/my-product/core/src
mkdir -p apps/my-product/web/src/app
{
"name": "@iflux/my-app",
"version": "0.0.0",
"private": true,
"scripts": {
"dev"
参考已有应用的 next.config.mjs 作为模板。
{
"extends": "@workspace/typescript-config/nextjs.json",
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
}
}如果应用在 apps/ 下直接添加,根 package.json 的 workspaces 已包含 "apps/*",无需额外配置。
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "My App",
description: "应用描述",
}
所有应用都可以引用以下共享包:
| 包 | 用途 |
|---|---|
@iflux/ui | shadcn/ui 组件库 |
@iflux/utils | 工具函数 |
@iflux/auth | 认证逻辑 |
@iflux/database | 数据库客户端 |
@iflux/api | API 层 |
开发服务器默认端口:
| 应用 | 端口 |
|---|---|
| web | 3000 |
| blog | 3001 |
| docs | 3002 |
| links | 3003 |
| studio | 3004 |
新应用依次递增。