Frontend Architecture (Next.js)

What problem does it solve?

This Skill provides an opinionated blueprint for building scalable Next.js 14 apps using the App Router, combining server and client components, middleware routing, and consistent state management.

Core Features & Use Cases

• App Router architecture: structuring routes, layouts, and nested routes for large-scale apps.
• Server and client component guidance: best practices for data loading and interactivity.
• Middleware routing and branding: routing strategies and example middleware.
• Use Case: Start a project with a clean separation of server/client concerns and move data fetching into server components where possible.

Quick Start

Set up a Next.js 14 app using App Router, configure layout.tsx, middleware.ts, and a few server components. Then wire a client component for interactivity.