Build modern full-stack web applications with Next.js (App Router, Server Components, RSC, PPR, SSR, SSG, ISR), Turborepo (monorepo management, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons in outlined/filled styles). Use when creating React applications, implementing server-side rendering, setting up monorepos with multiple packages, optimizing build performance and caching strategies, adding icon libraries, managing shared dependencies, or working with TypeScript full-stack projects.
Comprehensive guide for building modern full-stack web applications using Next.js, Turborepo, and RemixIcon.
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
Use when building a standalone application:
Setup:
npx create-next-app@latest my-app
cd my-app
npm install remixicon
Use when building multiple applications with shared code:
Setup:
npx create-turbo@latest my-monorepo
# Then configure Next.js apps in apps/ directory
# Install remixicon in shared UI packages
| 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 |
# 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
# 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
// 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" />
Next.js References:
Turborepo References:
RemixIcon References:
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"]
}
}
}
// 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>
}
// 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>
}
# .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 }}
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
python3 ~/.{TOOL}/skills/web-frameworks/scripts/nextjs-init.py --name my-app --typescript --app-router
# Migrate existing monorepo to Turborepo with dry-run
python3 ~/.{TOOL}/skills/web-frameworks/scripts/turborepo-migrate.py --path ./my-monorepo --dry-run
# Run tests
cd scripts/tests
pytest
Next.js:
Turborepo:
RemixIcon:
Building with this stack:
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer