Next.js – Routing

Ez az oldal a teljes Next.js jegyzet routingra vonatkozó részeit foglalja össze (2. fejezet). A részletesebb példák a content/nextjs/nextjs-full.mdx fájlban találhatók.

Fájl‑alapú routing – ismétlés

Mappa = URL szegmens.
page.tsx = route UI.

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

Nested route-ok

Egymásba ágyazott route‑ok természetesen jönnek létre a mappastruktúrából:

app/
└── dashboard/
    ├── page.tsx          → /dashboard
    └── settings/
        └── page.tsx      → /dashboard/settings

Dinamikus route-ok

Egyszerű dinamikus szegmens

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-ben Promise
  return <h1>Termék: {id}</h1>;
}

Catch‑all és opcionális catch‑all

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

Hasznos dokumentációs oldalak, blog kategóriák esetén.

Layout-ok

A layout.tsx egy tartós keret a route‑ok körül:

// app/layout.tsx – root layout
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="hu">
      <body>
        <nav>Navbar</nav>
        {children}
        <footer>Lábléc</footer>
      </body>
    </html>
  );
}

Tulajdonságok:

nem mountol újra navigációkor → állapot megmarad,
egymásba ágyazható (root + szekció layout-ok).

Template-ek

template.tsx hasonló a layout‑hoz, de minden navigációnál újra mountolódik:

jó animációkhoz,
vagy ha minden route váltásnál friss állapotot szeretnél.

Ökölszabály: amíg nem kell különleges viselkedés, használj layout.tsx‑et.

Not‑found és loading

404 – `not-found.tsx`

// app/blog/not-found.tsx
export default function NotFound() {
  return <h1>Nem található</h1>;
}

Programból:

import { notFound } from 'next/navigation';

if (!post) notFound();

Loading – `loading.tsx`

// app/blog/loading.tsx
export default function Loading() {
  return <div>Betöltés...</div>;
}

Automatikus Suspense boundary az adott szegmensre.

Route group-ok

Route group‑pal logikailag csoportosíthatsz, URL változás nélkül:

app/
├── (marketing)/
│   ├── about/page.tsx    → /about
│   └── contact/page.tsx  → /contact
└── (app)/
    ├── dashboard/page.tsx → /dashboard
    └── settings/page.tsx  → /settings

Használat:

külön layout‑ot adsz a marketing és az app részhez,
de az URL tiszta marad (/about, /dashboard, ...).

Route összefoglaló

Mappa = URL szegmens – gondolkodj a mappastruktúrában, ne route config-ban.
page.tsx → route UI, layout.tsx → keret.
Dinamikus route: [param], catch‑all: [...slug], opcionális: [[...slug]].
not-found.tsx és loading.tsx automatikusan vezérli a 404‑et és loading UI-t.
Route group‑okkal rendezheted a struktúrát URL változtatás nélkül.

Routing

On this page