Frontend Academy · Lekcja

Trasy API i Middleware w Next.js

Utworzy Pan/Pani bezserwerowe punkty końcowe API w katalogu api/, przetworzy żądania w Route Handlers i uruchomi brzegowy Middleware do obsługi uwierzytelniania oraz przekierowań.

Lekcja 4 z 414 kroki

Trasy API i Middleware w Next.js to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Po co korzystać z tras API?

Next.js dołącza serwer do aplikacji — można tworzyć endpointy backendu obok stron bez osobnego projektu Node. To świetne rozwiązanie do obsługi proxy, przesyłania formularzy, webhooków i małych interfejsów API.

Trasy API w Pages Routerze

Pliki w pages/api/ eksportują funkcję domyślną z obiektami req i res w stylu Express.

// pages/api/users.ts
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    const users = await db.users.findMany();
    return res.json(users);
  }
  if (req.method === 'POST') {
    const user = await db.users.create({ data: req.body });
    return res.status(201).json(user);
  }
  return res.status(405).end();
}

Route Handlers w App Routerze

App Router korzysta ze standardowego internetowego API Request/Response. Każda metoda HTTP jest eksportem nazwanym.

// app/api/users/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  const users = await db.users.findMany();
  return NextResponse.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return NextResponse.json(user, { status: 201 });
}

Dynamiczne trasy API

Segmenty dynamiczne działają tak samo: app/api/users/[id]/route.ts obsługuje adres /api/users/123.

// app/api/users/[id]/route.ts
export async function GET(req: Request, { params }: { params: { id: string }}) {
  const user = await db.users.findUnique({ where: { id: params.id }});
  if (!user) return new Response('Not Found', { status: 404 });
  return Response.json(user);
}

Odczytywanie cookies i nagłówków

W App Routerze użyj helperów z next/headers, dostępnych w zakresie pojedynczego żądania.

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

export async function GET() {
  const token = cookies().get('token')?.value;
  const userAgent = headers().get('user-agent');
  // ...
}

Strumieniowe odpowiedzi

Route Handlers mogą zwracać odpowiedź strumieniową — jest to przydatne w przypadku uzupełniania odpowiedzi czatu AI lub generowania dużych plików.

export async function GET() {
  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    async start(controller) {
      for (let i = 0; i < 5; i++) {
        controller.enqueue(encoder.encode(`chunk ${i}\n`));
        await new Promise(r => setTimeout(r, 500));
      }
      controller.close();
    }
  });
  return new Response(stream);
}

Middleware — uruchamiany przed trasami

middleware.ts w katalogu głównym projektu jest uruchamiany, zanim żądania dotrą do stron lub tras API. Użyj go do sprawdzania uwierzytelniania, przekierowań, przepisywania nagłówków i testów A/B.

// middleware.ts
import { NextResponse, type NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

Matcher middleware

Ogranicz ścieżki, dla których uruchamiany jest middleware, za pomocą konfiguracji matchera.

export const config = {
  matcher: [
    '/dashboard/:path*',
    '/api/:path*',
    '/((?!_next/static|_next/image|favicon.ico).*)'
  ]
};

Środowisko uruchomieniowe middleware

Middleware domyślnie działa w Edge Runtime — lekkim izolowanym środowisku V8, a nie w pełnym środowisku Node. Dostępne API jest ograniczone: nie można używać modułów Node, takich jak fs, ani zależności natywnych.

Wzorzec uwierzytelniania z middleware

Typowe rozwiązanie: zweryfikuj JWT w middleware, przekieruj do logowania, jeśli tokenu brakuje lub jest nieprawidłowy, a następnie dołącz zdekodowane dane użytkownika do nagłówka żądania, który mogą odczytać dalsze trasy.

import jwt from 'jsonwebtoken';

export function middleware(req: NextRequest) {
  const token = req.cookies.get('token')?.value;
  if (!token) return NextResponse.redirect(new URL('/login', req.url));
  try {
    const decoded = jwt.verify(token, process.env.SECRET!);
    const res = NextResponse.next();
    res.headers.set('x-user-id', String(decoded.sub));
    return res;
  } catch {
    return NextResponse.redirect(new URL('/login', req.url));
  }
}

Ograniczanie liczby żądań w middleware

Połącz middleware z magazynem KV (Upstash, Vercel KV), aby przed uruchomieniem logiki API wymuszać limity żądań dla poszczególnych adresów IP.

Kiedy NIE używać tras API

W przypadku osobnych mikrousług lub współdzielonych interfejsów API należy wdrożyć właściwy backend (Hono, Express, NestJS). Trasy API Next.js świetnie sprawdzają się w obsłudze proxy, webhooków i endpointów specyficznych dla aplikacji — nie służą jednak do udostępniania publicznego API innym klientom.

Szybki test

Gdzie działa middleware Next.js i jaki jest jego najczęstszy przypadek użycia?

Odpowiedz w interaktywnej lekcji

Podsumowanie: trasy API i middleware

Pages Router: pages/api z req/res. App Router: app/api/.../route.ts z eksportami metod (GET/POST itd.), używającymi Request/Response. Cookies i nagłówki odczytuje się za pomocą next/headers. Odpowiedzi strumieniowe obsługuje się za pomocą ReadableStream. middleware.ts działa w Edge przed trasami — służy do uwierzytelniania, przekierowań i obsługi nagłówków. Konfiguracja matchera ogranicza ścieżki. Do publicznych interfejsów API należy używać właściwego backendu.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 41
Lekcje: 163

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Trasy API i Middleware w Next.js” jest bezpłatna?

Tak — pełny tekst „Trasy API i Middleware w Next.js” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Trasy API i Middleware w Next.js”?

Utworzy Pan/Pani bezserwerowe punkty końcowe API w katalogu api/, przetworzy żądania w Route Handlers i uruchomi brzegowy Middleware do obsługi uwierzytelniania oraz przekierowań. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Trasy API i Middleware w Next.js”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Frontend Academy