React Next.js Frontend Architecture

Use When

• Building feature pages, dashboards, or flows in React and Next.js
• Refactoring frontend folders, state strategy, or rendering modes
• Improving frontend reliability and runtime performance

Workflow

1. Choose route and rendering model per page (SSR, SSG, ISR, client-side hydration).
2. Define folder and component boundaries (feature modules, shared primitives, hooks).
3. Implement typed service clients for API access and explicit error normalization.
4. Manage state by lifecycle: server state, URL state, local UI state, and form state.
5. Enforce interaction resilience with suspense boundaries, skeletons, and retry UX.
6. Validate accessibility, bundle size, and Core Web Vitals before merge.

Architecture Rules