React & Next.js
A teljes 4dental-platformhoz React 18-at és Next.js 15-öt (App Router) használunk: a rendelő bemutató oldalait, az időpontnaptárat, a betegkartont és a rendelő irányítópultját. A kód szigorú TypeScriptben készül, a tesztek automatikusak.
Miért a Next.js a projektjeinkhez
A Next.js 15 App Routerrel hibrid modellt kínál: a statikus oldalak (SSG) közvetlenül a CDN-ről érkeznek, a dinamikus oldalak Server Componentsként futnak, amelyek nem küldenek felesleges JavaScriptet a böngészőnek, az élő adatokat megjelenítő oldalak pedig elkülönített Client Componentseket használnak.
A képfájlokat automatikusan optimalizáljuk a `<Image>` komponenssel (WebP/AVIF, reszponzív srcSet, lazy loading), a betűtípusokat a `next/font` segítségével a kritikus CSS-be ágyazzuk, a harmadik féltől származó szkriptek pedig prioritási stratégiával töltődnek be.
- Server Components a rendelő nyilvános oldalaihoz — nulla kliensoldali JavaScript, azonnali feltérképezhetőség
- Streaming SSR Suspense-szel a naptárnézethez
- Incremental Static Regeneration (ISR) nagy fogászati kezelés-katalógusokhoz és blogcikkekhez — teljes újraépítés nélkül
- Route Groups és Parallel Routes összetett elrendezésekhez, felesleges újrarenderelés nélkül
Szigorú TypeScript — nincsenek rejtett hibák
Minden projektünk TypeScriptet használ `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` és `noUncheckedIndexedAccess` beállításokkal. Ezek fordításkor kiszűrik a futásidejű hibák egész csoportjait: a nem definiált értékek elérését, az API-válaszok hiányos típusait és a helytelen összehasonlításokat.
Állapotkezeléshez Zustandot (könnyű, boilerplate nélküli) vagy React Contextet használunk a helyi állapothoz. Az adatlekérést TanStack Query kezeli (automatikus gyorsítótár, okos érvénytelenítés, stale-while-revalidate). Az űrlapokat React Hook Form és Zod sémavalidáció kombinációjával építjük — szinkron és aszinkron validáció ismételt kód nélkül.
- ESLint saját szabályokkal a tiltott mintákhoz (any, console.log, mágikus stringek)
- Prettier egységes konfigurációval — formázás miatt egyetlen PR sem utasítható el
- Zod a külső API-kból érkező adatok futásidejű validálásához
- Útvonal-aliasok (`@/components/...`) — áttekinthető importok `../../..` nélkül
Automatizált tesztelés és CI/CD
Egységtesztek Vitesttel (gyors, Jest-kompatibilis API), komponenstesztek React Testing Libraryvel, E2E-tesztek Playwrighttal három böngészőn (Chromium, Firefox, WebKit). A GitHub Actions pipeline minden PR-nél lefuttatja a teszteket; ha bármelyik sikertelen, a merge le van tiltva.
- Lighthouse CI — alacsony pontszám esetén a staging-telepítés leáll
- Automatikus bundle-elemzés — figyelmeztetés, ha a bundle jelentősen nő a main ághoz képest
- Storybook a UI-komponensekhez — élő, vizuális dokumentáció
Avantaje și limitări
Avantaje
- SSR és SSG egyetlen keretrendszerben, egyszerű beállítással.
- Beépített SSR és SSG — teljes HTML a Google és az AI-motorok számára.
- A szigorú TypeScript fordítási időben kiszűri a hibákat, nem az éles üzemben.
- Érett ökoszisztéma: Vercel, több ezer csomag és nagy közösség.
Limitări
- Az App Router és a Server Components tanulási görbéje meredek.
- Gyakori, kompatibilitást törő változások a főverziók között — karbantartást igényel.
- Egyszerű statikus oldalhoz a Next.js túlzás lehet a sima HTML-hez képest.
- A nagy build-ek növelik a fordítási időt és a CI-költségeket.
Verdict scurt
Válassza a React & Next.js-t olyan weboldalakhoz és webalkalmazásokhoz, amelyeknek gyorsnak, indexelhetőnek és skálázhatónak kell lenniük. Egyetlen, interaktivitás nélküli statikus landingoldalhoz egy egyszerűbb eszköz is elegendő.
Tabel de specificații
| Képesség | Korlát / küszöb | Tipikus használat | |
|---|---|---|---|
| Renderelés | SSR, SSG, ISR, CSR | A Server Components korlátozza a böngésző API-kat | Statikus marketing + dinamikus irányítópult |
| Teljesítmény | Core Web Vitals-optimalizálás | A hidratálási JavaScript a interaktivitással együtt nő | Nagy forgalmú, SEO-szempontból kritikus oldalak |
| Skálázhatóság | Sok felhasználó, edge CDN | Node- vagy serverless hostingot igényel | SaaS, portálok, fogászati platformok |
| Tipikus költség | Nyílt forráskódú; a hosting költsége a választástól függ | A serverless függvények használat szerint számláznak | Kis projektektől a vállalati szintig |
Next.js vs. alternatívák
| Szempont | Next.js | Nuxt / Astro / Vite |
|---|---|---|
| SSR + SSG egy keretrendszerben | Igen, beépítve | Részben (Nuxt igen, Vite nem) |
| React-ökoszisztéma | Teljes | Vue (Nuxt) vagy több keretrendszer (Astro) |
| Legjobb tisztán statikus oldalakhoz | Jó | Az Astro könnyebb |
Întrebări frecvente
Miért a Next.js és nem sima React (Vite)?
A Vite-tel használt React csak a böngészőben renderel, így a kezdeti HTML üres — gyenge SEO és GEO szempontból. A Next.js SSR-t és SSG-t ad hozzá, és teljes HTML-t szolgáltat, amelyet a Google és az AI-motorok azonnal olvasnak.
Jó a Next.js a SEO-hoz?
Igen. Az SSR és SSG indexelhető HTML-t ad, a metaadatok és a JSON-LD a szerveren generálódnak, a Core Web Vitals pedig már a kezdetektől fontos szempont — mind erős rangsorolási jelzések.
Át tudom vinni a meglévő oldalt Next.js-re?
Igen, lépésenként: az oldalakat egyesével költöztetjük, a URL-eket és a 301-es átirányításokat megtartva, hogy ne vesszen el a Google-helyezés.
Milyen hostingra van szükség a Next.js-hez?
A statikus oldalak bármely CDN-en futhatnak. A dinamikus funkciókhoz (SSR, API-útvonalak) Node.js vagy serverless futtatókörnyezet kell, például Vercel, Netlify vagy Docker-konténer.