React & Next.js — High-performance web applications
We use React 18 and Next.js 15 (App Router) for the entire 4dental platform: the practice presentation pages, the appointments agenda, patient records and the practice dashboard. Code is strict TypeScript, with automated tests.
Why Next.js for our projects
Next.js 15 with App Router offers a unique hybrid model: static pages (SSG) are served instantly from the CDN, dynamic pages run as Server Components that send no unnecessary JavaScript to the browser, and real-time pages use isolated Client Components.
Images are automatically optimised via the `<Image>` component (WebP/AVIF, responsive srcSet, lazy-loading), fonts are inlined in critical CSS with `next/font`, and third-party scripts load with priority strategies.
- Server Components for the practice public pages — zero client JS, instant crawling
- Streaming SSR with Suspense for the live agenda and availability
- Incremental Static Regeneration (ISR) for large catalogs of dental treatments and blog articles — without a rebuild
- Route Groups and Parallel Routes for complex layouts without re-render
Strict TypeScript — no silent bugs
All our projects use TypeScript with `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` and `noUncheckedIndexedAccess`. These settings block entire categories of runtime bugs at compile time: undefined access, incomplete types on API responses, wrong comparisons.
For state management we use Zustand (lightweight, no boilerplate) or React Context for local state. Data fetching is handled via TanStack Query (auto cache, smart invalidation, stale-while-revalidate). Forms with React Hook Form + Zod schema validation — synchronous and asynchronous validation without duplicated code.
- ESLint with custom rules for forbidden patterns (any, console.log, magic strings)
- Prettier with uniform config — no PR rejected for formatting
- Zod for runtime validation of data from external APIs
- Path aliases (`@/components/...`) — clean imports without `../../..`
Automated testing and CI/CD
Unit tests with Vitest (Jest-API compatible), component tests with React Testing Library, E2E with Playwright on Chromium, Firefox and WebKit.
- Playwright E2E tests run across several browsers
- Bundle analyser to track JavaScript bundle size
- Storybook for UI components — living visual documentation
Pros and cons
Pros
- Images, fonts and scripts optimised through built-in Next.js components.
- Native SSR and SSG — full HTML for Google and AI engines.
- Strict TypeScript catches bugs at compile time, not in production.
- Mature ecosystem: Vercel, thousands of packages, huge community.
Limitations
- The App Router and Server Components learning curve is steep.
- Frequent breaking changes between major versions — needs maintenance.
- For a simple static site, Next.js can be overkill versus plain HTML.
- Large builds increase compile time and CI cost.
Quick verdict
Choose React & Next.js for websites and web apps that must be fast, indexable and scalable. For a single static landing page with no interactivity, a simpler tool is enough.
Specifications table
| Capability | Limit / threshold | Typical use | |
|---|---|---|---|
| Rendering | SSR, SSG, ISR, CSR | Server Components limit browser APIs | Static marketing + dynamic dashboard |
| Performance | Built-in framework optimisations | Hydration JS grows with interactivity | High-traffic, SEO-critical sites |
| Scaling | Tens of thousands of users, edge CDN | Needs Node or serverless hosting | SaaS, portals, dental platforms |
| Typical cost | Open-source; hosting cost depends on the choice | Serverless functions billed per use | From small projects to enterprise |
Next.js vs alternatives
| Criterion | Next.js | Nuxt / Astro / Vite |
|---|---|---|
| SSR + SSG in one framework | Yes, native | Partial (Nuxt yes, Vite no) |
| React ecosystem | Full | Vue (Nuxt) or multi-framework (Astro) |
| Best for pure static site | Good | Astro is lighter |
Frequently asked questions
Why Next.js and not plain React (Vite)?
React with Vite renders only on the client, so the initial HTML is empty — poor for SEO and GEO. Next.js adds SSR and SSG, shipping full HTML that Google and AI engines read immediately.
Is Next.js good for SEO?
Yes. SSR/SSG ships indexable HTML, metadata and JSON-LD are generated on the server, and page performance (Core Web Vitals) can be measured and optimised.
Can I migrate an existing site to Next.js?
Yes, incrementally: pages move one by one, keeping URLs and 301 redirects where addresses change.
What hosting does Next.js need?
Static pages run on any CDN. Dynamic features (SSR, API routes) need Node.js or a serverless runtime such as Vercel, Netlify or a Docker container.