Web Frameworks Skill Group

Web框架技能组

Comprehensive guide for building modern full-stack web applications using Next.js, Turborepo, and RemixIcon.

本指南全面介绍如何使用Next.js、Turborepo和RemixIcon构建现代化全栈Web应用。

Overview

概述

This skill group combines three powerful tools for web development:

Next.js - React framework with SSR, SSG, RSC, and optimization features Turborepo - High-performance monorepo build system for JavaScript/TypeScript RemixIcon - Icon library with 3,100+ outlined and filled style icons

该技能组整合了三个Web开发领域的强大工具：

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

When to Use This Skill Group

何时使用该技能组

Building new full-stack web applications with modern React
Setting up monorepos with multiple apps and shared packages
Implementing server-side rendering and static generation
Optimizing build performance with intelligent caching
Creating consistent UI with professional iconography
Managing workspace dependencies across multiple projects
Deploying production-ready applications with proper optimization

基于现代化React构建全新全栈Web应用
搭建包含多个应用与共享包的单仓库
实现服务端渲染与静态生成
通过智能缓存优化构建性能
借助专业图标打造一致的UI界面
管理多项目间的工作区依赖
部署经过充分优化的生产级应用

Stack Selection Guide

技术栈选择指南

Single Application: Next.js + RemixIcon

单应用场景：Next.js + RemixIcon

Use when building a standalone application:

E-commerce sites
Marketing websites
SaaS applications
Documentation sites
Blogs and content platforms

Setup:

bash

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

适用于构建独立应用的场景：

电商网站
营销官网
SaaS应用
文档站点
博客与内容平台

搭建步骤：

bash

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

Monorepo: Next.js + Turborepo + RemixIcon

单仓库场景：Next.js + Turborepo + RemixIcon

Use when building multiple applications with shared code:

Microfrontends
Multi-tenant platforms
Internal tools with shared component library
Multiple apps (web, admin, mobile-web) sharing logic
Design system with documentation site

Setup:

bash

npx create-turbo@latest my-monorepo

适用于构建多个共享代码的应用场景：

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

搭建步骤：

bash

npx create-turbo@latest my-monorepo

Then configure Next.js apps in apps/ directory

然后在apps/目录下配置Next.js应用

Install remixicon in shared UI packages

在共享UI包中安装remixicon

undefined

undefined

Framework Features Comparison

框架功能对比

Feature	Next.js	Turborepo	RemixIcon
Primary Use	Web framework	Build system	UI icons
Best For	SSR/SSG apps	Monorepos	Consistent iconography
Performance	Built-in optimization	Caching & parallel tasks	Lightweight fonts/SVG
TypeScript	Full support	Full support	Type definitions available

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

Quick Start

快速开始

Next.js Application

Next.js应用

bash

undefined

bash

undefined

Create new project

创建新项目

npx create-next-app@latest my-app cd my-app

Install RemixIcon

安装RemixIcon

npm install remixicon

Import in layout

在布局中引入

app/layout.tsx

import 'remixicon/fonts/remixicon.css'

Start development

启动开发服务

npm run dev

undefined

npm run dev

undefined

Turborepo Monorepo

Turborepo单仓库

bash

undefined

bash

undefined

Create monorepo

创建单仓库

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

Structure:

目录结构:

apps/web/ - Next.js application

apps/web/ - 面向客户的Next.js应用

apps/docs/ - Documentation site

apps/docs/ - 文档站点

packages/ui/ - Shared components with RemixIcon

packages/ui/ - 集成RemixIcon的共享UI组件

packages/config/ - Shared configs

packages/config/ - 共享配置

turbo.json - Pipeline configuration

turbo.json - 构建流水线配置

Run all apps

运行所有应用

npm run dev

Build all packages

构建所有包

npm run build

undefined

npm run build

undefined

RemixIcon Integration

RemixIcon集成

tsx

// 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" />

tsx

// 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" />

Reference Navigation

参考导航

Next.js References:

App Router Architecture - Routing, layouts, pages, parallel routes
Server Components - RSC patterns, client vs server, streaming
Data Fetching - fetch API, caching, revalidation, loading states
Optimization - Images, fonts, scripts, bundle analysis, PPR

Turborepo References:

Setup & Configuration - Installation, workspace config, package structure
Task Pipelines - Dependencies, parallel execution, task ordering
Caching Strategies - Local cache, remote cache, cache invalidation

RemixIcon References:

Integration Guide - Installation, usage, customization, accessibility

Next.js参考文档：

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

Turborepo参考文档：

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

RemixIcon参考文档：

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

Common Patterns & Workflows

常见模式与工作流

Pattern 1: Full-Stack Monorepo

模式1：全栈单仓库

my-monorepo/
├── apps/
│   ├── web/              # Customer-facing Next.js app
│   ├── admin/            # Admin dashboard Next.js app
│   └── docs/             # Documentation site
├── packages/
│   ├── ui/               # Shared UI with RemixIcon
│   ├── api-client/       # API client library
│   ├── config/           # ESLint, TypeScript configs
│   └── types/            # Shared TypeScript types
└── turbo.json            # Build pipeline

turbo.json:

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"]
    }
  }
}

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:

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"]
    }
  }
}

Pattern 2: Shared Component Library

模式2：共享组件库

tsx

// 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>
}

tsx

// 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 />}>首页</Button>
}

Pattern 3: Optimized Data Fetching

模式3：优化的数据获取

tsx

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

// Static generation at build time
export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map(post => ({ slug: post.slug }))
}

// Revalidate every hour
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>
}

tsx

// 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>
}

Pattern 4: Monorepo CI/CD Pipeline

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

yaml

undefined

yaml

undefined

.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 }}

undefined

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 }}

undefined

Utility Scripts

实用脚本

Python utilities in

scripts/

directory:

nextjs-init.py - Initialize Next.js project with best practices turborepo-migrate.py - Convert existing monorepo to Turborepo

Usage examples:

bash

undefined

scripts/

目录下的Python工具：

nextjs-init.py - 遵循最佳实践初始化Next.js项目 turborepo-migrate.py - 将现有单仓库转换为Turborepo结构

使用示例：

bash

undefined

Initialize new Next.js app with TypeScript and recommended setup

初始化带TypeScript和推荐配置的Next.js应用

python scripts/nextjs-init.py --name my-app --typescript --app-router

Migrate existing monorepo to Turborepo with dry-run

模拟转换现有单仓库为Turborepo（试运行）

python scripts/turborepo-migrate.py --path ./my-monorepo --dry-run

Run tests

运行测试

cd scripts/tests pytest

undefined

cd scripts/tests pytest

undefined

Best Practices

最佳实践

Next.js:

Default to Server Components, use Client Components only when needed
Implement proper loading and error states
Use Image component for automatic optimization
Set proper metadata for SEO
Leverage caching strategies (force-cache, revalidate, no-store)

Turborepo:

Structure monorepo with clear separation (apps/, packages/)
Define task dependencies correctly (^build for topological)
Configure outputs for proper caching
Enable remote caching for team collaboration
Use filters to run tasks on changed packages only

RemixIcon:

Use line style for minimal interfaces, fill for emphasis
Maintain 24x24 grid alignment for crisp rendering
Provide aria-labels for accessibility
Use currentColor for flexible theming
Prefer webfonts for multiple icons, SVG for single icons

Next.js：

默认使用Server Components，仅在必要时使用Client Components
实现完善的加载与错误状态
使用Image组件进行自动优化
设置合适的元数据以优化SEO
合理利用缓存策略（force-cache、revalidate、no-store）

Turborepo：

采用清晰的目录结构（apps/、packages/）
正确定义任务依赖（使用^build保证拓扑顺序）
配置输出路径以实现正确缓存
启用远程缓存以支持团队协作
使用过滤器仅在变更的包上运行任务

RemixIcon：

极简界面使用线框风格，强调元素使用填充风格
保持24x24网格对齐以确保清晰渲染
提供aria-label以支持无障碍访问
使用currentColor实现灵活主题适配
多图标场景优先使用Webfont，单图标场景优先使用SVG

web-frameworks

Original

Translation

Web Frameworks Skill Group

Web框架技能组

Overview

概述

When to Use This Skill Group

何时使用该技能组

Stack Selection Guide

技术栈选择指南

Single Application: Next.js + RemixIcon

单应用场景：Next.js + RemixIcon

Monorepo: Next.js + Turborepo + RemixIcon

单仓库场景：Next.js + Turborepo + RemixIcon

Then configure Next.js apps in apps/ directory

然后在apps/目录下配置Next.js应用

Install remixicon in shared UI packages

在共享UI包中安装remixicon

Framework Features Comparison

框架功能对比

Quick Start

快速开始

Next.js Application

Next.js应用

Create new project

创建新项目

Install RemixIcon

安装RemixIcon

Import in layout

在布局中引入

app/layout.tsx

app/layout.tsx

Start development

启动开发服务

Turborepo Monorepo

Turborepo单仓库

Create monorepo

创建单仓库

Structure:

目录结构:

apps/web/ - Next.js application

apps/web/ - 面向客户的Next.js应用

apps/docs/ - Documentation site

apps/docs/ - 文档站点

packages/ui/ - Shared components with RemixIcon

packages/ui/ - 集成RemixIcon的共享UI组件

packages/config/ - Shared configs

packages/config/ - 共享配置

turbo.json - Pipeline configuration

turbo.json - 构建流水线配置

Run all apps

运行所有应用

Build all packages

构建所有包

RemixIcon Integration

RemixIcon集成

Reference Navigation

参考导航

Common Patterns & Workflows

常见模式与工作流

Pattern 1: Full-Stack Monorepo

模式1：全栈单仓库

Pattern 2: Shared Component Library

模式2：共享组件库

Pattern 3: Optimized Data Fetching

模式3：优化的数据获取

Pattern 4: Monorepo CI/CD Pipeline

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

.github/workflows/ci.yml

.github/workflows/ci.yml

Utility Scripts

实用脚本

Initialize new Next.js app with TypeScript and recommended setup

初始化带TypeScript和推荐配置的Next.js应用

Migrate existing monorepo to Turborepo with dry-run

模拟转换现有单仓库为Turborepo（试运行）

Run tests

运行测试

Best Practices