React & Next.js Patterns

What problem does it solve?

This Skill provides a comprehensive guide to modern React and Next.js development patterns, enabling developers to build efficient, scalable, and maintainable applications.

Core Features & Use Cases

• Server Components: Leverage Next.js App Router's default Server Components for data fetching and backend resource access.
• Client Components: Understand when and how to use 'use client' for interactive elements and state management.
• Server Actions: Implement mutations and data updates without traditional API routes.
• Data Fetching Strategies: Utilize parallel fetching, streaming with Suspense, and caching/revalidation for optimal performance.
• Error Handling: Implement Error Boundaries and notFound() for robust error management.
• Performance Optimization: Employ dynamic imports, image optimization, and metadata generation.
• FrankX-Specific Patterns: Includes examples of glassmorphic styling and loading states tailored for the FrankX stack.

Quick Start

Use the React & Next.js Patterns skill to implement a Server Action for form submissions.