Cheatsheet

21. Cheatsheet

Gyors referencia kártya

Fájlok és szerepük

Fájl	Szerepe	Mikor szükséges
`app/page.tsx`	URL oldal	Minden URL-hez
`app/layout.tsx`	Megőrzött wrapper	Navigáció között megmarad
`app/loading.tsx`	Betöltési állapot	Adatlekérés közben
`app/error.tsx`	Hibakezelő boundary	Catch error, `'use client'` kell
`app/not-found.tsx`	404 oldal	`notFound()` hívásakor
`app/route.ts`	API végpont	REST API létrehozásához
`proxy.ts`	Hálózati szűrő	Auth, redirect, header módosítás

Server vs Client Component

	Server Component	Client Component
Direktíva	(nincs)	`'use client'`
Async/await	✅	❌ (useEffect)
useState	❌	✅
useEffect	❌	✅
onClick stb.	❌	✅
DB hozzáférés	✅	❌
Titkos env	✅	❌
Bundle hatás	Nulla	Növeli

Rendering típusok

Típus	Mikor	Config
SSG	Build időben egyszer	Dinamikus adat nincs
ISR	Build + időközönként	`revalidate: N`
SSR	Minden kérésnél	`cookies()` / `headers()` hívás
Streaming	Részletekben	`Suspense` wrapper

Caching (Next.js 16)

// Oldal szintű cache
'use cache'
export default async function Page() { ... }

// Függvény szintű cache
async function getData() {
  'use cache'
  cacheLife('hours')         // seconds | minutes | hours | days | weeks | max
  cacheTag('my-data')        // invalidálási tag
  return await fetch(...)
}

// Cache invalidálás
revalidateTag('my-data')     // tag törlése
updateTag('my-data')         // tag frissítése
refresh()                    // router frissítése

Routing gyors referencia

app/page.tsx                → /
app/about/page.tsx          → /about
app/blog/[slug]/page.tsx    → /blog/:slug
app/shop/[...path]/page.tsx → /shop/a/b/c
app/(group)/page.tsx        → / (group nincs az URL-ben)
app/@slot/page.tsx          → Parallel Route slot

Adatlekérés

// Server Component – ajánlott
const data = await fetch(url, { next: { revalidate: 60, tags: ['tag'] } })

// Parallel fetch
const [a, b] = await Promise.all([fetchA(), fetchB()])

// Server Action
'use server'
export async function submit(formData: FormData) { ... }

Navigáció

// Deklaratív
<Link href="/about">Rólunk</Link>

// Programmatikus (Client Component)
const router = useRouter()
router.push('/page')
router.replace('/page')
router.back()
router.refresh()

// Szerver oldali
redirect('/page')      // from 'next/navigation'
notFound()             // 404

Hasznos importok

// Routing
import Link from 'next/link'
import { useRouter, usePathname, useSearchParams } from 'next/navigation'
import { redirect, notFound } from 'next/navigation'

// Cache
import { revalidateTag, updateTag, refresh } from 'next/cache'
import { cacheLife, cacheTag } from 'next/cache'

// Request
import { cookies, headers } from 'next/headers'

// Media
import Image from 'next/image'
import { Inter } from 'next/font/google'

// Dynamic import
import dynamic from 'next/dynamic'

// Válasz utáni háttérmunka (verzió szerint ellenőrizd)
import { after } from 'next/server'

Vízesés ellen

const [a, b] = await Promise.all([fetchA(), fetchB()])

Hydration / szerver–kliens egyezés

Kerüld az első renderen: Date.now(), window, érvénytelen HTML beágyazás. Részletek: Hydration és eltérések fejezet.

Cheatsheet

On this page