Web Frameworks Skill Group
Comprehensive guide for building modern full-stack web applications using Next.js, Turborepo, and RemixIcon.
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
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
Stack Selection Guide
Single Application: Next.js + RemixIcon
Use when building a standalone application:
- E-commerce sites
- Marketing websites
- SaaS applications
- Documentation sites
- Blogs and content platforms
Setup:
npx create-next-app@latest my-app
cd my-app
npm install remixicon
Monorepo: 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:
npx create-turbo@latest my-monorepo
# Then configure Next.js apps in apps/ directory
# Install remixicon in shared UI packages
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 |
Quick Start
Next.js Application
# 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 Integration
// 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" />
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:
RemixIcon References:
Common Patterns & Workflows
Pattern 1: Full-Stack Monorepo
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:
{
"$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
// 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>
}
Pattern 3: Optimized Data Fetching
// 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>
}
Pattern 4: Monorepo CI/CD Pipeline
# .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 }}
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:
# 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
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
Resources
Implementation Checklist
Building with this stack: