---
name: ck-web-frameworks
description: Build with Next.js App Router, RSC, SSR, ISR, and Turborepo monorepos. Use for React apps, server rendering, build optimization, caching strategies, shared component libraries, monorepo setup.
---

# ck-web-frameworks

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

## When to Use

- 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
- Managing workspace dependencies across multiple projects
- Deploying production-ready applications

## Don't Use When

- Pure component-level React patterns — use `ck-frontend-development`
- Backend API design — use `ck-backend-development`
- Simple single-page static site with no SSR needs

## Stack Selection Guide

### Single Application: Next.js

Use for standalone applications:
- E-commerce sites, marketing websites, SaaS applications
- Documentation sites, blogs, content platforms

```bash
npx create-next-app@latest my-app
npm install remixicon
```

### Monorepo: Next.js + Turborepo

Use when building multiple applications with shared code:
- Microfrontends, multi-tenant platforms
- Multiple apps (web, admin, mobile-web) sharing logic
- Design system with documentation site

```bash
npx create-turbo@latest my-monorepo
```

## Monorepo Structure

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

## Next.js Best Practices

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

**Rendering Modes:**
- **SSR**: `fetch(url)` — fresh data per request
- **SSG**: `generateStaticParams()` — build-time generation
- **ISR**: `{ next: { revalidate: 3600 } }` — stale-while-revalidate

## Turborepo Best Practices

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

**turbo.json pipeline:**
```json
{
  "pipeline": {
    "build": { "dependsOn": ["^build"], "outputs": [".next/**", "dist/**"] },
    "dev": { "cache": false, "persistent": true },
    "lint": {},
    "test": { "dependsOn": ["build"] }
  }
}
```

## RemixIcon Usage

```tsx
// Webfont (HTML)
<i className="ri-home-line"></i>

// React component
import { RiHomeLine } from "@remixicon/react"
<RiHomeLine size={24} />
```

**Guidelines:**
- Use line style for minimal interfaces, fill for emphasis
- Provide `aria-label` for accessibility
- Use `currentColor` for flexible theming
- Prefer webfonts for multiple icons; SVG for single icons

## CI/CD Pipeline

```yaml
jobs:
  build:
    steps:
      - run: npm install
      - run: npx turbo run build test lint
        env:
          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
```

## Implementation Checklist

- [ ] Project structure (single app or monorepo)
- [ ] TypeScript and ESLint configured
- [ ] Next.js with App Router
- [ ] Turborepo pipeline (if monorepo)
- [ ] RemixIcon installed and configured
- [ ] Routing and layouts implemented
- [ ] Loading and error states added
- [ ] Image and font optimization configured
- [ ] Data fetching patterns established
- [ ] Caching strategies configured
- [ ] Remote caching enabled (if monorepo)
- [ ] CI/CD pipeline configured