⚡

Web框架技能组Skill web-frameworks

本技能组提供综合指南，用于使用Next.js、Turborepo和RemixIcon构建现代全栈Web应用程序。适用于React应用开发、服务器端渲染、单仓库管理、构建性能优化和图标库集成。关键词：Next.js, Turborepo, RemixIcon, 全栈开发, 前端框架, 单仓库, 图标库, SEO优化。

前端开发 0 次安装 0 次浏览 更新于 3/14/2026

name: web-frameworks description: 使用Next.js（应用路由器、服务器组件、RSC、PPR、SSR、SSG、ISR）、Turborepo（单仓库管理、任务管道、远程缓存、并行执行）和RemixIcon（3100+种轮廓/填充样式的SVG图标）构建现代全栈Web应用程序。适用于创建React应用、实现服务器端渲染、设置具有多个包的单仓库、优化构建性能和缓存策略、添加图标库、管理共享依赖项或处理TypeScript全栈项目。 license: MIT version: 1.0.0

Web框架技能组

综合指南，用于使用Next.js、Turborepo和RemixIcon构建现代全栈Web应用程序。

概述

本技能组结合了三种强大的Web开发工具：

Next.js - 具有SSR、SSG、RSC和优化功能的React框架 Turborepo - 用于JavaScript/TypeScript的高性能单仓库构建系统 RemixIcon - 包含3,100多种轮廓和填充样式图标的图标库

何时使用此技能组

  • 使用现代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参考：

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）

Turborepo：

  • 以清晰分离（apps/、packages/）构建单仓库结构
  • 正确定义任务依赖项（^build用于拓扑排序）
  • 配置输出以进行适当缓存
  • 启用远程缓存以促进团队协作
  • 使用过滤器仅针对已更改的包运行任务

RemixIcon：

  • 使用线型样式用于最小化界面，填充用于强调
  • 保持24x24网格对齐以确保清晰渲染
  • 提供aria-label以提高可访问性
  • 使用currentColor进行灵活主题化
  • 优先选择Webfont用于多个图标，SVG用于单个图标

资源

实施检查清单

使用此栈构建：

  • [ ] 创建项目结构（单一应用或单仓库）
  • [ ] 配置TypeScript和ESLint
  • [ ] 设置Next.js与应用路由器
  • [ ] 配置Turborepo管道（如果是单仓库）
  • [ ] 安装和配置RemixIcon
  • [ ] 实现路由和布局
  • [ ] 添加加载和错误状态
  • [ ] 配置图片和字体优化
  • [ ] 设置数据获取模式
  • [ ] 配置缓存策略
  • [ ] 根据需要添加API路由
  • [ ] 实现共享组件库（如果是单仓库）
  • [ ] 配置远程缓存（如果是单仓库）
  • [ ] 设置CI/CD管道
  • [ ] 配置部署平台