Technologies / Next.jsThe React framework
for production.
Routing, rendering, data fetching, and deployment — solved. Below is how we structure Next.js projects and which rendering mode we reach for when.
routing
The file system
is the router.
Folders become URL segments. Special files — page.tsx, layout.tsx, loading.tsx — define what each route does. No config file. No route table.
The App Router — every folder is a route segment.
Root layout. Wraps every page. Providers, fonts, global chrome.
Home route. Server Component by default.
Streaming fallback shown while the route loads.
Error boundary for the route and its children.
404 UI rendered when notFound() is called.
Nested route group.
/products — the product list.
Skeleton shown while products load.
Dynamic route segment.
Route group — doesn't affect the URL.
/about — no /marketing prefix.
/pricing
Route handlers.
POST endpoint for Stripe webhooks.
rendering
Six rendering modes. Picked per route.
Next.js is unique in that every route chooses its own rendering strategy. The rest of the app doesn't have to agree.
| Mode | When | Example |
|---|---|---|
| Static (SSG) | Content that doesn't change often | Marketing pages, blog posts, docs |
| Server (SSR) | Per-request data, personalization | Dashboards, search results |
| ISR | Static speed, periodic updates | Product catalogues, news |
| Streaming | Long content, progressive render | Feeds, nested layouts |
| Client | Interactivity, hooks, browser APIs | Forms, toggles, real-time UIs |
| Edge | Geo routing, auth, personalization at edge | A/B tests, redirects |
the split
Server by default. Client by exception.
This is the single biggest change in modern Next.js. Every component is a Server Component unless it says otherwise. Getting this right is most of the job.
Server Component
default- Fetches data directly — no API layer needed
- Ships zero JavaScript to the browser
- Can access secrets, env vars, and databases
- Streams to the client as it renders
- Cannot use hooks, state, or event handlers
Client Component
'use client'- Interactivity — onClick, onChange, forms
- React hooks — useState, useEffect, useRef
- Browser APIs — window, localStorage, geolocation
- Third-party libraries that expect a browser
- Realtime — WebSockets, subscriptions, live data
faq
Next.js
questions.
When Next.js instead of plain React?
App Router or Pages Router?
How do you decide Server vs Client Components?
Where do you deploy Next.js?
How do you handle data fetching?
What about SEO?
Building with Next.js?
We can help — whether you need a team or just engineers.