Next.js – Alapok

Ez az oldal a teljes Next.js jegyzet (1–2. fejezet) rövidített, áttekintő változata. A teljes részletes anyag a content/nextjs/nextjs-full.mdx fájlban található.

Mi a Next.js?

• React-alapú full‑stack framework, a Vercel fejleszti.
• Nem csak UI library, hanem:
  • routing,
  • server‑side rendering (SSR, SSG, ISR),
  • API endpoint‑ok (route.ts),
  • kép‑ és fontoptimalizálás,
  • caching, streaming, stb.
• Egy projektben tudsz frontend + backend logikát írni.

Mikor használd?

• SEO fontos (blog, marketing oldal, webshop).
• Szerver oldali logika kell (auth, adatbázis).
• Gyors első betöltést akarsz.
• Nem akarsz külön backend projektet fenntartani.

Sima React vs Next.js – gyors összehasonlítás

Első Next.js projekt létrehozása

npx create-next-app@latest my-app

Ajánlott válaszok:

• TypeScript – igen
• ESLint – igen
• Tailwind – ahogy szeretnéd
• src/ mappa – ízlés kérdése (sokan igen)
• App Router – igen (ezt használjuk)
• Import alias – @/*

App Router projekt szerkezete (ajánlott)

my-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx      # Root layout
│   │   ├── page.tsx        # Főoldal (/)
│   │   ├── globals.css     # Globális stílusok
│   │   └── ...
│   ├── components/         # Újrafelhasználható komponensek
│   └── lib/                # Segédfüggvények, adatbázis, stb.
├── public/                 # Statikus fájlok
├── next.config.ts          # Next konfiguráció
├── tsconfig.json           # TypeScript beállítások
└── package.json

Fájl‑alapú routing – alapok

• Mappa = URL szegmens.
• page.tsx tesz egy route‑ot “láthatóvá”.

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

Speciális fájlok:

• layout.tsx – tartós keret (navbar, footer),
• loading.tsx – automatikus loading állapot,
• error.tsx – hibaoldal,
• not-found.tsx – 404,
• route.ts – API endpoint (pl. /api/users).

Dinamikus és nested route‑ok – röviden

Dinamikus route:

app/products/[id]/page.tsx   → /products/1, /products/42

export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params; // Next.js 15: params Promise
  return <h1>Termék: {id}</h1>;
}

Catch‑all route:

app/docs/[...slug]/page.tsx     → /docs/a, /docs/a/b, /docs/a/b/c
app/docs/[[...slug]]/page.tsx  → /docs, /docs/a, /docs/a/b

Route group – URL nélküli csoportosítás

app/
├── (marketing)/
│   ├── about/page.tsx    → /about
│   └── contact/page.tsx  → /contact
└── (shop)/
    ├── products/page.tsx → /products
    └── cart/page.tsx     → /cart

Zárójelben lévő mappanevek nem jelennek meg az URL‑ben, de külön layout‑ot adhatsz hozzájuk.

Tovább olvasás a teljes jegyzetben

A részletes magyarázatok, kódrészletek és extra példák a teljes jegyzetben vannak:

• content/nextjs/nextjs-full.mdx – 1–2. fejezet.