API route-ok és backend logika

11. API route-ok és backend logika

Route Handlers

A route.ts fájlok REST API végpontokat hoznak létre az app/api/ mappában:

// app/api/posts/route.ts
import { NextRequest, NextResponse } from 'next/server'

export async function GET(request: NextRequest) {
  const posts = await db.posts.findAll()
  return NextResponse.json(posts)
}

export async function POST(request: NextRequest) {
  const body = await request.json()

  const post = await db.posts.create({
    title: body.title,
    content: body.content,
  })

  return NextResponse.json(post, { status: 201 })
}

Dinamikus Route Handler

// app/api/posts/[id]/route.ts
export async function GET(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params  // await kötelező Next.js 16-ban!
  const post = await db.posts.findById(id)

  if (!post) {
    return NextResponse.json({ error: 'Nem található' }, { status: 404 })
  }

  return NextResponse.json(post)
}

export async function DELETE(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params
  await db.posts.delete(id)
  return new NextResponse(null, { status: 204 })
}

Request adatok olvasása

export async function POST(request: NextRequest) {
  // JSON body
  const json = await request.json()

  // Form data
  const formData = await request.formData()

  // Query paraméterek
  const searchParams = request.nextUrl.searchParams
  const page = searchParams.get('page') ?? '1'

  // Headers
  const authHeader = request.headers.get('authorization')

  // Cookies
  const cookieStore = request.cookies
  const token = cookieStore.get('session')?.value
}

Middleware → proxy.ts (Next.js 16)

Next.js 16-ban a middleware.ts fájl neve proxy.ts-re változott, és csak Node.js runtime-on futhat:

// proxy.ts (korábban: middleware.ts)
import { NextRequest, NextResponse } from 'next/server'

export function proxy(request: NextRequest) {
  const token = request.cookies.get('auth-token')

  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/dashboard/:path*', '/api/protected/:path*'],
}

Megjegyzés: Ha Edge Runtime szükséges, maradj a middleware.ts-nél. A proxy.ts csak Node.js-en fut.

Server-only kód

// lib/db.ts
import 'server-only' // ha valaki importálja kliens oldalon, build error

export async function getSecretData() {
  return await db.secret.findAll()
}

Ugyanazon útvonalon `page.tsx` és `route.ts`

Ha ugyanabban a mappában van page.tsx (oldal) és route.ts (API), nem minden HTTP metódus kombinálható szabadon: például a GET kérés ütközhet – a page.tsx a GET-et az oldal kiszolgálására használja, a route.ts pedig szintén GET-et exportálhat. Ilyenkor build hiba vagy váratlan routing jelentkezhet.

Gyakorlati szabály: REST API-t tedd app/api/... alá; az alkalmazás oldalait app/(szegmens)/page.tsx-ben tartsd. Ha egy szegmensben tényleg kell végpont és oldal is, a dokumentáció aktuális szabályait kövesd (verziófüggő).

Mikor Route Handler, mikor Server Action?

Cél	Tipikus választás
Külső kliens (mobil app, harmadik fél) hívja a HTTP API-t	Route Handler (`route.ts`)
Űrlap / gomb a saját Next appból, nincs nyilvános REST igény	Server Action (`'use server'`)
Webhook, file upload nagy body-val, speciális header-ek	Gyakran Route Handler

A Server Action ugyanahhoz az alkalmazáshoz optimalizált (form, transition); a Route Handler általános HTTP felület.

📝 Összefoglaló – 11. fejezet

Route Handlers (route.ts) REST API végpontokat hoznak létre
Next.js 16-ban a params async – minden Route Handlerben await-elni kell
page.tsx + route.ts GET ütközésére figyelj – API-t jellemzően app/api alá szervezd
Server Action vs Route Handler: belső mutáció vs nyilvános HTTP API
proxy.ts (korábbi middleware.ts) kezeli a hálózati határt, csak Node.js runtime-on fut
server-only csomag megakadályozza, hogy szerver kód véletlenül a kliensen fusson

API route-ok és backend logika

On this page