Next.js for frontend-heavy products
I use Next.js to build product interfaces where routing, data, metadata, and interaction need to work as one system. The framework choice supports the product; the value is a clear workflow, sensible server and client boundaries, and a codebase the team can continue changing.
- App Router pages, layouts, route handlers, and Server Components
- Client boundaries limited to interactions that need browser state
- Loading and error behavior designed as part of the user journey
- Static and generated metadata aligned with visible page content
- Authentication and data access shaped around the product workflow
- Route, image, bundle, and third-party script performance reviews
Where this capability shows up in the work.
- 2025CVLeap AI: Next.js product built in eight weeksUsed Next.js, TypeScript, Supabase, and OpenAI to connect onboarding, an assisted editor, account state, storage, and PDF export.Next.jsTypeScriptSupabaseOpenAI
- 2026This portfolio: public site and content systemBuilt the site on the Next.js App Router with route metadata, structured data, generated social images, article routes, and machine-readable content endpoints.Next.jsTypeScriptStructured Data
- 2026Phone Assistant: operations interface for a voice demoBuilt the product interface around call state, routing, ticket creation, and human handoff for an OpenAI Realtime and Twilio voice-support demo.Next.jsOpenAI RealtimeTwilioPostgres
The important Next.js decision is often where the boundary belongs.
I keep static layout and data work on the server where that makes the route simpler, then introduce client components at the leaves that need interaction, local state, or browser APIs.
That boundary affects bundle size, loading behavior, data flow, and how easy the feature is to reason about. I choose it from the product behavior instead of applying one rendering pattern to every route.
Scope, evidence, and how I apply this work.
Do you work with the App Router?
Yes. This portfolio uses the current App Router model, including Server Components, route handlers, static metadata, generated metadata, and route-level file conventions.
Can you work in an existing Next.js project?
Yes. I first inspect its current Next.js version and bundled documentation, then follow the conventions in that codebase unless a specific boundary is causing a product or maintenance problem.
How do you approach SEO?
Metadata describes the visible page, canonical URLs match the route, and structured data reflects the same person, service, article, or project facts shown to visitors. I avoid creating several pages that repeat the same positioning with different keywords.
Is Next.js always the right choice?
No. A small client-only tool may be simpler in React with Vite, and a backend-heavy system may need a separate service. I use Next.js when its routing, rendering, metadata, and full-stack conventions help the product rather than adding ceremony.
Tell me where the workflow is stuck.
Share the product, the people using it, and what needs to become easier or faster. I will tell you whether my product and frontend experience fits the problem.