Why architecture matters early
When a Next.js project starts, it’s tempting to ship fast and think about architecture later. We’ve learned — sometimes the hard way — that the decisions you make in week one echo through every sprint after.
Our folder structure
We organise everything under src/: the app/ directory holds Next.js App Router pages and layouts, components/ has reusable UI, sections/ holds page-level sections (Hero, Services, etc.), lib/ has data fetching and utilities, and hooks/ stores custom React hooks.
State management
For most projects, React Query + Zustand covers 95% of state needs. We avoid Redux unless the client specifically requires it.
Deployment
We deploy to Vercel for most clients, with edge functions for latency-sensitive routes and ISR for content-heavy pages.
Key takeaways
- Start with a clear folder structure and enforce it via ESLint
- Choose your data-fetching strategy before you write a single component
- Use Server Components by default, Client Components only when needed