Next.js – áttekintés

Modern App Router szemlélet | Next.js 15 | 2025

Mi a Next.js?

A Next.js egy React-alapú full-stack web framework, amelyet a Vercel fejleszt és tart karban. Amíg a sima React csak egy UI library – vagyis önmagában csupán komponenseket renderel a böngészőben –, a Next.js ennél jóval többet ad: routing-ot, server-side rendering-et, API endpoint-okat, képoptimalizálást, cache kezelést és még sok mást.

Lényeg: Next.js-sel teljes webalkalmazást építhetsz egyetlen projektben, frontenddel és backendllel együtt.

Mikor használd a Next.js-t?

Jó választás, ha:

• nyilvános weboldalt vagy appot építesz, ahol számít az SEO,
• szükség van szerver oldali logikára (adatbázis, API-k, auth),
• gyors első betöltést szeretnél,
• nem akarsz külön backend projektet fenntartani.

Kevésbé indokolt, ha:

• belső admin eszközt építesz, ahol az SEO irreleváns,
• már van stabil backend (pl. Laravel, Django) és csak egy SPA frontendet szeretnél.

App Router alapgondolat

• Fájl-alapú routing az app/ mappában.
• Mappa = URL szegmens.
• Speciális fájlok:
  • page.tsx – egy route UI-ja,
  • layout.tsx – tartós keret (navbar, sidebar, footer),
  • loading.tsx, error.tsx, not-found.tsx – állapot- és hibaoldalak,
  • route.ts – API endpoint (Route Handler).

Példa:

app/
├── page.tsx           → /
├── about/page.tsx     → /about
└── blog/page.tsx      → /blog

Rendering módok – nagyon röviden

Alapelv: alapból statikus (SSG), csak akkor lesz dinamikus (SSR), ha tényleg szükséges.

Server vs Client komponensek – rövid összefoglaló

• Server Component (alapértelmezett):

  • a szerveren fut,
  • közvetlenül érheti el az adatbázist / API-kat,
  • nem tartalmazhat state-et vagy event handlert,
  • kisebb JS bundle a kliensen.

• Client Component ("use client"):

  • a böngészőben hidratálódik, interaktív,
  • használhat useState, useEffect, event handlereket,
  • nagyobb JS bundle.

Irányelv: mindent tarts szerveren, ami nem igényel interaktivitást; "use client" csak a valóban interaktív “levelekre” kell.