Hogyan működik a fájlalapú útválasztás az App Routerben?

Question

Accepted Answer

Az App Routerben az **`app/` mappájában lévő mappastruktúra határozza meg az útvonalait** — nincs routerkonfigurációt írni. Minden mappa egy URL-szegmens, és az abban lévő speciális fájlok határozzák meg, hogy az adott szegmens mit jelenít meg. ## Mappák = URL-szegmensek ```text app/ page.tsx → / about/page.tsx → /about blog/page.tsx → /blog blog/[slug]/page.tsx → /blog/:slug (dynamic segment) shop/(sale)/page.tsx → /shop (route group — parentheses don't add to URL) ``` ## A speciális fájlok Minden mappa tartalmazhat fenntartott fájlneveket, amelyeknek mindegyike egy specifikus szerepet játszik: ```text page.tsx → the route's UI (REQUIRED to make a segment routable) layout.tsx → shared wrapper that persists across child routes loading.tsx → loading UI (auto-wraps the page in ) error.tsx → error boundary for the segment not-found.tsx→ 404 UI route.ts → an API endpoint (instead of a page) ``` ## Dinamikus szegmensek ```tsx // app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything export default function Post({ params }: { params: { slug: string } }) { return

Post: {params.slug}

; // params.slug = "hello" } ``` A szögletes zárójelek dinamikus paramétert hoznak létre, amelyet a `params` keresztül továbbítanak az oldalnak. Változatok: `[...slug]` (catch-all), `[[...slug]]` (opcionális catch-all). ## Útvonalcsoportok és szervezés ```text app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL) ``` A zárójelek **útvonalcsoportokat** hoznak létre a fájlok szervezéséhez vagy különböző elrendezések alkalmazásához az URL-t érintése nélkül. ## Miért fontos ez A fájlalapú útválasztás nyilvánvalóvá teszi az URL-szerkezetet a fájlfáról — nincs központi útvonal-konfiguráció, amelyet karbantartani és szinkronban tartani kellene. A speciális fájlnevek (`page`, `layout`, `loading`, `error`, `route`) és a zárójelek konvenciói (`[param]`, `[...catchAll]`, `(group)`) ismerete bármely App Router alkalmazás fejlesztésének alapvető szókincse.