Next.js App Router in Production
The Next.js App Router has matured significantly. Here’s how we use it at Ruzora to build the Developer Portal — a full-stack application serving placed engineers across Latin America.
Server Components by Default
With the App Router, components are server components by default. This means less JavaScript shipped to the client and faster initial page loads. Our blog pages are fully server-rendered with force-static for SSG.
Client Components When Needed
Add the "use client" directive only when you need interactivity, browser APIs, or React hooks like useState and useEffect. All our portal dashboard pages are client components since they use React Query for live data fetching.
Data Fetching Patterns
Server components can fetch data directly at the component level. Client components work great with @tanstack/react-query for cached, reactive data fetching with automatic revalidation.
We use route groups (portal) and (public) to separate authenticated and public pages, with Next.js middleware handling the auth redirect logic.
