web-frameworks

用途

Web Frameworks 技能组用于指导构建现代全栈 Web 应用，组合了三个工具：Next.js（React 框架，支持 SSR、SSG、RSC 及优化特性）、Turborepo（面向 JavaScript/TypeScript 的高性能 monorepo 构建系统）、RemixIcon（包含 3100+ 线性与填充风格图标的图标库）。

适用场景包括：使用现代 React 构建新的全栈 Web 应用；搭建包含多个应用与共享包的 monorepo；实现服务端渲染与静态生成；通过智能缓存优化构建性能；使用专业图标体系创建一致的 UI；跨多个项目管理工作区依赖；部署经过优化的生产级应用。

技术栈选型

单应用：Next.js + RemixIcon。适用于独立应用，如电商站点、营销网站、SaaS 应用、文档站点、博客与内容平台。

安装命令：

npx create-next-app@latest my-app
cd my-app
npm install remixicon

Monorepo：Next.js + Turborepo + RemixIcon。适用于构建多个共享代码的应用，如微前端、多租户平台、共享组件库的内部工具、多个应用（web、admin、mobile-web）共享逻辑、带文档站点的设计系统。

安装命令：

npx create-turbo@latest my-monorepo
# Then configure Next.js apps in apps/ directory
# Install remixicon in shared UI packages

主要能力

Next.js：App Router 架构（路由、布局、页面、并行路由）、Server Components（RSC 模式、客户端与服务端区分、流式渲染）、数据获取（fetch API、缓存、重新验证、加载状态）、优化（图片、字体、脚本、打包分析、PPR）。

Turborepo：安装与配置（工作区配置、包结构）、任务流水线（依赖、并行执行、任务顺序）、缓存策略（本地缓存、远程缓存、缓存失效）。

RemixIcon：集成指南（安装、使用、定制、无障碍）。

使用方式

Next.js 应用快速开始：

# Create new project
npx create-next-app@latest my-app
cd my-app

# Install RemixIcon
npm install remixicon

# Import in layout
# app/layout.tsx
import 'remixicon/fonts/remixicon.css'

# Start development
npm run dev

Turborepo monorepo 快速开始：

# Create monorepo
npx create-turbo@latest my-monorepo
cd my-monorepo

# Structure:
# apps/web/          - Next.js application
# apps/docs/         - Documentation site
# packages/ui/       - Shared components with RemixIcon
# packages/config/   - Shared configs
# turbo.json         - Pipeline configuration

# Run all apps
npm run dev

# Build all packages
npm run build

RemixIcon 集成示例：

// Webfont (HTML/CSS)
<i className="ri-home-line"></i>
<i className="ri-search-fill ri-2x"></i>

// React component
import { RiHomeLine, RiSearchFill } from "@remixicon/react"
<RiHomeLine size={24} />
<RiSearchFill size={32} color="blue" />

常见模式

模式一：全栈 monorepo。目录结构包含 apps/web（面向客户的 Next.js 应用）、apps/admin（管理后台 Next.js 应用）、apps/docs（文档站点），以及 packages/ui（含 RemixIcon 的共享 UI）、packages/api-client、packages/config、packages/types，根目录 turbo.json 定义构建流水线。

turbo.json 示例：

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**", "dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {},
    "test": {
      "dependsOn": ["build"]
    }
  }
}

模式二：共享组件库。在 packages/ui 中定义组件并引用 RemixIcon，在 apps/web 中通过包名导入使用。

模式三：优化数据获取。使用 generateStaticParams 在构建时静态生成，通过 fetch 的 next.revalidate 设置重新验证周期，配合 notFound 处理缺失数据。

模式四：monorepo CI/CD 流水线。GitHub Actions 中检出代码、设置 Node 18、安装依赖，并执行 npx turbo run build test lint，通过 TURBO_TOKEN 与 TURBO_TEAM 环境变量启用远程缓存。

辅助脚本

scripts/ 目录下的 Python 工具：nextjs-init.py 用于按最佳实践初始化 Next.js 项目；turborepo-migrate.py 用于将现有 monorepo 转换为 Turborepo。

使用示例：

# Initialize new Next.js app with TypeScript and recommended setup
python scripts/nextjs-init.py --name my-app --typescript --app-router

# Migrate existing monorepo to Turborepo with dry-run
python scripts/turborepo-migrate.py --path ./my-monorepo --dry-run

# Run tests
cd scripts/tests
pytest

最佳实践

Next.js：默认使用 Server Components，仅在需要时使用 Client Components；实现正确的加载与错误状态；使用 Image 组件自动优化；设置正确的 metadata 以利 SEO；利用缓存策略（force-cache、revalidate、no-store）。

Turborepo：以清晰分离的结构组织 monorepo（apps/、packages/）；正确定义任务依赖（^build 表示拓扑依赖）；配置 outputs 以正确缓存；启用远程缓存便于团队协作；使用过滤器仅对变更包运行任务。

RemixIcon：极简界面用线性风格，强调用填充风格；保持 24x24 网格对齐以获得清晰渲染；提供 aria-label 以支持无障碍；使用 currentColor 实现灵活主题；多个图标优先用 webfont，单个图标优先用 SVG。

资源与实施清单

资源：Next.js 文档 https://nextjs.org/docs/llms.txt；Turborepo 文档 https://turbo.build/repo/docs；RemixIcon 官网 https://remixicon.com。

实施清单：创建项目结构（单应用或 monorepo）；配置 TypeScript 与 ESLint；设置带 App Router 的 Next.js；配置 Turborepo 流水线（若为 monorepo）；安装并配置 RemixIcon；实现路由与布局；添加加载与错误状态；配置图片与字体优化；设置数据获取模式；配置缓存策略；按需添加 API 路由；实现共享组件库（若为 monorepo）；配置远程缓存（若为 monorepo）；设置 CI/CD 流水线；配置部署平台。

限制

资料未提供该技能组的具体收费、价格、平台支持范围、性能数据或效果承诺，相关事实暂未提供。