142 lines
4.1 KiB
Markdown
142 lines
4.1 KiB
Markdown
---
|
|
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
|