網頁框架技能組合

使用 Next.js、Turborepo 和 RemixIcon 構建現代全端 Web 應用程式的全面指南。

概覽

此技能組合整合了三種強大的網頁開發工具：

Next.js - 具備 SSR、SSG、RSC 與最佳化功能的 React 框架 Turborepo - 高效能的 JavaScript/TypeScript 單體倉庫建置系統 RemixIcon - 擁有 3,100+ 個輪廓與填充風格圖示的圖示庫

使用時機

使用現代 React 構建新的全端 Web 應用程式
設置包含多個應用程式與共享套件的單體倉庫
實作伺服器端渲染與靜態生成
透過智慧型快取最佳化建置效能
使用專業圖示建立一致的使用者介面
跨多個專案管理工作區相依性
部署經過適當最佳化的正式環境應用程式

堆疊選擇指南

單一應用程式：Next.js + RemixIcon

在建置獨立應用程式時使用：

電子商務網站
行銷網站
SaaS 應用程式
文件網站
部落格與內容平台

設置：

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

單體倉庫：Next.js + Turborepo + RemixIcon

在建置包含共享程式碼的多個應用程式時使用：

微前端
多租戶平台
搭配共享元件庫的內部工具
共享邏輯的多個應用程式（網頁、管理後台、行動網頁）
包含文件網站的設計系統

設置：

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 模式、客戶端 vs 伺服器、串流
資料獲取 - 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

實作檢查清單

使用此堆疊建置時：

套件：網頁框架