Web 框架技能组

使用 Next.js、Turborepo 和 RemixIcon 构建现代全栈 Web 应用的全面指南。

概述

本技能组整合了三个用于 Web 开发的强大工具：

Next.js - 具有 SSR、SSG、RSC 和优化功能的 React 框架 Turborepo - 面向 JavaScript/TypeScript 的高性能单体仓库构建系统 RemixIcon - 包含 3100 多个轮廓和填充风格图标的图标库

何时使用本技能组

使用现代 React 构建新的全栈 Web 应用程序
建立包含多个应用和共享包的单体仓库
实现服务端渲染和静态生成
通过智能缓存优化构建性能
使用专业图标创建一致的 UI
跨多个项目管理工作区依赖
部署经过适当优化的生产级应用

技术栈选择指南

单一应用：Next.js + RemixIcon

在构建独立应用程序时使用：

电子商务网站
营销网站
SaaS 应用程序
文档站点
博客和内容平台

设置：

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

单体仓库：Next.js + Turborepo + RemixIcon

在构建多个具有共享代码的应用程序时使用：

微前端
多租户平台
带有共享组件库的内部工具
共享逻辑的多个应用（Web、管理后台、移动端 Web）
带有文档站点的设计系统

设置：

npx create-turbo@latest my-monorepo
# 然后在 apps/ 目录中配置 Next.js 应用程序
# 在共享 UI 包中安装 remixicon

框架功能对比

特性	Next.js	Turborepo	RemixIcon
主要用途	Web 框架	构建系统	UI 图标
最适用于	SSR/SSG 应用	单体仓库	一致的图标体系
性能	内置优化	缓存与并行任务	轻量级字体/SVG
TypeScript	全面支持	全面支持	提供类型定义

快速开始

Next.js 应用程序

# 创建新项目
npx create-next-app@latest my-app
cd my-app

# 安装 RemixIcon
npm install remixicon

# 在布局文件中导入
# app/layout.tsx
import 'remixicon/fonts/remixicon.css'

# 启动开发
npm run dev

Turborepo 单体仓库

# 创建单体仓库
npx create-turbo@latest my-monorepo
cd my-monorepo

# 结构：
# apps/web/          - Next.js 应用程序
# apps/docs/         - 文档站点
# packages/ui/       - 带有 RemixIcon 的共享组件
# packages/config/   - 共享配置
# turbo.json         - 流水线配置

# 运行所有应用
npm run dev

# 构建所有包
npm run build

RemixIcon 集成

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

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

参考导航

Next.js 参考：

App Router 架构 - 路由、布局、页面、并行路由
服务端组件 - RSC 模式、客户端与服务器、流式传输
数据获取 - fetch API、缓存、重新验证、加载状态
优化 - 图片、字体、脚本、包分析、PPR

Turborepo 参考：

设置与配置 - 安装、工作区配置、包结构
任务流水线 - 依赖关系、并行执行、任务排序
缓存策略 - 本地缓存、远程缓存、缓存失效

RemixIcon 参考：

集成指南 - 安装、使用、自定义、无障碍

常见模式与工作流

模式 1：全栈单体仓库

my-monorepo/
├── apps/
│   ├── web/              # 面向用户的 Next.js 应用
│   ├── admin/            # 管理后台 Next.js 应用
│   └── docs/             # 文档站点
├── packages/
│   ├── ui/               # 带有 RemixIcon 的共享 UI
│   ├── api-client/       # API 客户端库
│   ├── config/           # ESLint、TypeScript 配置
│   └── types/            # 共享 TypeScript 类型
└── 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"]
    }
  }
}

模式 2：共享组件库

// packages/ui/src/button.tsx
import { RiLoader4Line } from "@remixicon/react";

export function Button({ children, loading, icon }) {
  return (
    <button>
      {loading ? <RiLoader4Line className="animate-spin" /> : icon}
      {children}
    </button>
  );
}

// apps/web/app/page.tsx
import { Button } from "@repo/ui/button";
import { RiHomeLine } from "@remixicon/react";

export default function Page() {
  return <Button icon={<RiHomeLine />}>Home</Button>;
}

模式 3：优化数据获取

// app/posts/[slug]/page.tsx
import { notFound } from "next/navigation";

// 构建时静态生成
export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

// 每小时重新验证
async function getPost(slug: string) {
  const res = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { revalidate: 3600 },
  });
  if (!res.ok) return null;
  return res.json();
}

export default async function Post({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  if (!post) notFound();

  return <article>{post.content}</article>;
}

模式 4：单体仓库 CI/CD 流水线

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
      - run: npm install
      - run: npx turbo run build test lint
        env:
          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}

实用脚本

位于 scripts/ 目录中的 Python 实用程序：

nextjs_init.py - 使用最佳实践初始化 Next.js 项目 turborepo_migrate.py - 将现有单体仓库转换为 Turborepo

使用示例：

# 使用 TypeScript 和推荐设置初始化新的 Next.js 应用
python scripts/nextjs_init.py --name my-app --typescript --app-router

# 将现有单体仓库迁移到 Turborepo（干运行）
python scripts/turborepo_migrate.py --path ./my-monorepo --dry-run

# 运行测试
cd scripts/tests
pytest

最佳实践

Next.js：

默认使用服务端组件，仅在需要时使用客户端组件
实现适当的加载和错误状态
使用 Image 组件进行自动优化
为 SEO 设置正确的元数据
利用缓存策略（force-cache、revalidate、no-store）
将稳定的 Next.js 安全版本与 canary 框架漂移分开追踪。生产应用应保持在已打补丁的稳定版本线上，除非测试特定的上游问题，否则避免使用 canary 独有锁定。

Turborepo：

使用清晰的分隔方式组织单体仓库（apps/、packages/）
正确定义任务依赖关系（^build 用于拓扑排序）
配置输出以实现正确的缓存
启用远程缓存以便团队协作
使用过滤器仅对更改过的包运行任务

RemixIcon：

对于极简界面使用线条样式，强调时使用填充样式
保持 24x24 网格对齐以获得清晰渲染
提供 aria-labels 以确保无障碍
使用 currentColor 实现灵活的主题化
对于多个图标，优先使用 webfonts；对于单个图标，优先使用 SVG

资源

Next.js：https://nextjs.org/docs/llms.txt
Turborepo：https://turbo.build/repo/docs
RemixIcon：https://remixicon.com

实现检查清单

使用此技术栈构建时：

套件:web-frameworks