Projekt struktúra és App Router

3. Projekt struktúra és App Router

Alapértelmezett mappastruktúra

my-app/
├── app/
│   ├── layout.tsx          ← root layout
│   ├── page.tsx            ← főoldal (/)
│   ├── globals.css         ← globális stílusok
│   ├── favicon.ico
│   ├── blog/
│   │   ├── page.tsx        ← /blog
│   │   └── [slug]/
│   │       └── page.tsx    ← /blog/:slug
│   └── api/
│       └── users/
│           └── route.ts    ← /api/users
├── components/             ← újrafelhasználható komponensek
│   ├── ui/
│   └── layout/
├── lib/                    ← segédfüggvények, utils
├── public/                 ← statikus fájlok
├── next.config.ts          ← Next.js konfiguráció
├── tailwind.config.ts
└── tsconfig.json

Az App Router lényege

Az App Router a fájl alapú routing elvén működik: a app/ mappán belüli könyvtárstruktúra közvetlenül leképződik az URL-ekre.

app/page.tsx           →  /
app/about/page.tsx     →  /about
app/blog/page.tsx      →  /blog
app/blog/[slug]/page.tsx  →  /blog/:slug
app/shop/[...slug]/page.tsx  →  /shop/* (catch-all)

Speciális fájlok az App Router-ben

Fájlnév	Szerepe
`page.tsx`	Az adott URL-hez tartozó oldal
`layout.tsx`	Wrapper, ami megőrzi állapotát navigáció között
`loading.tsx`	Automatikus Suspense wrapper betöltési állapothoz
`error.tsx`	Hibakezelő boundary
`not-found.tsx`	404-es oldal
`route.ts`	API végpont (GET, POST, stb.)
`template.tsx`	Layout, de nem őrzi meg állapotát
`middleware.ts` / `proxy.ts`	Kérések elfogása (Next.js 16-ban: proxy.ts)

Root layout

A app/layout.tsx az alkalmazás "gerince" – minden oldal ebbe ágyazódik be:

// app/layout.tsx
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'My App',
  description: 'Next.js 16 alkalmazás',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="hu">
      <body className={inter.className}>
        {children}
      </body>
    </html>
  )
}

Nested layouts (beágyazott layoutok)

Minden könyvtárban lehet saját layout.tsx, amely csak az adott URL-szegmens alatti oldalakra vonatkozik:

app/
├── layout.tsx          ← minden oldalra érvényes
├── dashboard/
│   ├── layout.tsx      ← csak /dashboard/* oldalakra
│   ├── page.tsx        ← /dashboard
│   └── settings/
│       └── page.tsx    ← /dashboard/settings

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex">
      <Sidebar />
      <main className="flex-1">{children}</main>
    </div>
  )
}

Route Groups

A route groupokkal könyvtárakat hozhatsz létre routing hatás nélkül – csak szervezési céllal:

app/
├── (marketing)/
│   ├── about/page.tsx   ← /about (nem /(marketing)/about)
│   └── blog/page.tsx    ← /blog
└── (app)/
    ├── layout.tsx        ← csak az alkalmazás belső oldalaihoz
    └── dashboard/page.tsx ← /dashboard

📝 Összefoglaló – 3. fejezet

Az App Router fájl alapú routing rendszert használ – a könyvtárstruktúra = URL struktúra
A layout.tsx megőrzi állapotát navigáció között, szemben a page.tsx-szel
A speciális fájlok (loading.tsx, error.tsx) automatikus Suspense és hibakezelést adnak
Route groupok (zárójelbe tett mappák) szervezési célt szolgálnak, routing hatás nélkül

Projekt struktúra és App Router

On this page