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, implem

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: 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: 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 Turborepo Monorepo RemixIcon Integration Reference Navigation Next.js References: [App Router Architecture](./references/nextjs app router.md) Routing, layouts, pages, parallel routes [Server Components](./references/nextjs server components.md) RSC patterns, client vs server, streaming [Data Fetching](./references/nextjs data fetching.md) fetch API, caching, revalidation, loading states [Optimization](./references/nextjs optimization.md) Images, fonts, scripts, bundle analysis, PPR Turborepo References: [Setup & Configuration](./references/turborepo setup.md) Installation, workspace config, package structure [Task Pipelines](./references/turborepo pipelines.md) Dependencies, parallel execution, task ordering [Caching Strategies](./references/turborepo caching.md) Local cache, remote cache, cache invalidation RemixIcon References: [Integration Guide](./references/remix icon integration.md) Installation, usage, customization, accessibility Common Patterns & Workflows Pattern 1: Full Stack Monorepo turbo.json: Pattern 2: Shared Component Library Pattern 3: Optimized Data Fetching Pattern 4: Monorepo CI/CD Pipeline 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: 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 Next.js: https://nextjs.org/docs/llms.txt Turborepo: https://turbo.build/repo/docs RemixIcon: https://remixicon.com Implementation Checklist Building with this stack: [ ] Create project structure (single app or monorepo) [ ] Configure TypeScript and ESLint [ ] Set up Next.js with App Router [ ] Configure Turborepo pipeline (if monorepo) [ ] Install and configure RemixIcon [ ] Implement routing and layouts [ ] Add loading and error states [ ] Configure image and font optimization [ ] Set up data fetching patterns [ ] Configure caching strategies [ ] Add API routes as needed [ ] Implement shared component library (if monorepo) [ ] Configure remote caching (if monorepo) [ ] Set up CI/CD pipeline [ ] Configure deployment platform

web-frameworks