Middleware v Next.js: Zvládnutie zachytávania požiadaviek pre dynamické aplikácie

Middleware v Next.js poskytuje flexibilný a výkonný spôsob, ako zachytiť a upraviť prichádzajúce požiadavky predtým, ako sa dostanú k vašim trasám. Táto schopnosť vám umožňuje implementovať širokú škálu funkcií, od autentifikácie a autorizácie až po presmerovanie a A/B testovanie, a to všetko pri optimalizácii výkonu. Tento komplexný sprievodca vás prevedie základnými konceptmi middleware v Next.js a ukáže, ako ho efektívne využívať.

Čo je middleware v Next.js?

Middleware v Next.js je funkcia, ktorá sa spúšťa pred dokončením požiadavky. Umožňuje vám:

Zachytávať požiadavky: Skúmať hlavičky, cookies a URL prichádzajúcej požiadavky.
Upravovať požiadavky: Prepísať URL, nastaviť hlavičky alebo presmerovať používateľov na základe špecifických kritérií.
Vykonať kód: Spustiť logiku na strane servera predtým, ako sa stránka vykreslí.

Funkcie middleware sú definované v súbore middleware.ts (alebo middleware.js) v koreňovom adresári vášho projektu. Spúšťajú sa pre každú trasu vo vašej aplikácii alebo pre špecifické trasy na základe konfigurovateľných zhodovačov (matchers).

Kľúčové koncepty a výhody

Objekt Request

Objekt request poskytuje prístup k informáciám o prichádzajúcej požiadavke, vrátane:

request.url: Plná URL adresa požiadavky.
request.method: Metóda HTTP (napr. GET, POST).
request.headers: Objekt obsahujúci hlavičky požiadavky.
request.cookies: Objekt reprezentujúci cookies požiadavky.
request.geo: Poskytuje geolokačné údaje spojené s požiadavkou, ak sú dostupné.

Objekt Response

Funkcie middleware vracajú objekt Response na riadenie výsledku požiadavky. Môžete použiť nasledujúce odpovede:

NextResponse.next(): Pokračuje v spracovaní požiadavky normálne, čím jej umožní dostať sa na zamýšľanú trasu.
NextResponse.redirect(url): Presmeruje používateľa na inú URL.
NextResponse.rewrite(url): Prepíše URL požiadavky, čím efektívne servíruje inú stránku bez presmerovania. URL v prehliadači zostáva rovnaká.
Vrátenie vlastného objektu Response: Umožňuje servírovať vlastný obsah, ako napríklad chybovú stránku alebo špecifickú odpoveď JSON.

Matchers (Zhodovače)

Matchers vám umožňujú špecifikovať, na ktoré trasy sa má váš middleware aplikovať. Matchers môžete definovať pomocou regulárnych výrazov alebo vzorov ciest. Tým sa zabezpečí, že váš middleware beží len vtedy, keď je to potrebné, čo zlepšuje výkon a znižuje réžiu.

Edge Runtime

Middleware v Next.js beží na Edge Runtime, čo je odľahčené JavaScriptové prostredie, ktoré môže byť nasadené blízko vašich používateľov. Táto blízkosť minimalizuje latenciu a zlepšuje celkový výkon vašej aplikácie, najmä pre globálne distribuovaných používateľov. Edge Runtime je dostupný na Vercel's Edge Network a ďalších kompatibilných platformách. Edge Runtime má určité obmedzenia, konkrétne použitie Node.js API.

Praktické príklady: Implementácia funkcií middleware

1. Autentifikácia

Autentifikačný middleware sa môže použiť na ochranu trás, ktoré vyžadujú, aby boli používatelia prihlásení. Tu je príklad, ako implementovať autentifikáciu pomocou cookies:


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

export function middleware(request: NextRequest) {
 const token = request.cookies.get('auth_token');

 if (!token) {
 return NextResponse.redirect(new URL('/login', request.url))
 }

 return NextResponse.next()
}

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

Tento middleware kontroluje prítomnosť cookie auth_token. Ak sa cookie nenájde, používateľ je presmerovaný na stránku /login. Konfigurácia config.matcher špecifikuje, že tento middleware by sa mal spustiť iba pre trasy pod /dashboard.

Globálna perspektíva: Prispôsobte logiku autentifikácie tak, aby podporovala rôzne metódy (napr. OAuth, JWT) a integrovala sa s rôznymi poskytovateľmi identity (napr. Google, Facebook, Azure AD), aby vyhovovala používateľom z rôznych regiónov.

2. Autorizácia

Autorizačný middleware sa môže použiť na riadenie prístupu k zdrojom na základe rolí alebo oprávnení používateľa. Napríklad môžete mať administrátorský panel, ku ktorému majú prístup len špecifickí používatelia.


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

export async function middleware(request: NextRequest) {
 const token = request.cookies.get('auth_token');

 if (!token) {
 return NextResponse.redirect(new URL('/login', request.url))
 }

 // Príklad: Získanie rolí používateľa z API (nahraďte vašou skutočnou logikou)
 const userResponse = await fetch('https://api.example.com/userinfo', {
 headers: {
 Authorization: `Bearer ${token}`,
 },
 });
 const userData = await userResponse.json();

 if (userData.role !== 'admin') {
 return NextResponse.redirect(new URL('/unauthorized', request.url))
 }

 return NextResponse.next()
}

export const config = {
 matcher: ['/admin/:path*'],
}

Tento middleware získa rolu používateľa a skontroluje, či má rolu admin. Ak nie, je presmerovaný na stránku /unauthorized. Tento príklad používa zástupný API endpoint. Nahraďte `https://api.example.com/userinfo` vaším skutočným endpointom autentifikačného servera.

Globálna perspektíva: Pri spracúvaní údajov o používateľoch dbajte na predpisy o ochrane osobných údajov (napr. GDPR, CCPA). Implementujte primerané bezpečnostné opatrenia na ochranu citlivých informácií a zabezpečenie súladu s miestnymi zákonmi.

3. Presmerovanie

Presmerovací middleware sa môže použiť na presmerovanie používateľov na základe ich polohy, jazyka alebo iných kritérií. Napríklad môžete presmerovať používateľov na lokalizovanú verziu vašej webovej stránky na základe ich IP adresy.


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

export function middleware(request: NextRequest) {
 const country = request.geo?.country || 'US'; // Predvolene US, ak geolokácia zlyhá

 if (country === 'DE') {
 return NextResponse.redirect(new URL('/de', request.url))
 }

 if (country === 'FR') {
 return NextResponse.redirect(new URL('/fr', request.url))
 }

 return NextResponse.next()
}

export const config = {
 matcher: ['/'],
}

Tento middleware kontroluje krajinu používateľa na základe jeho IP adresy a presmeruje ho na príslušnú lokalizovanú verziu webovej stránky (/de pre Nemecko, /fr pre Francúzsko). Ak geolokácia zlyhá, predvolene sa použije americká verzia. Všimnite si, že toto závisí od dostupnosti vlastnosti `geo` (napr. pri nasadení na Vercel).

Globálna perspektíva: Uistite sa, že vaša webová stránka podporuje viacero jazykov a mien. Poskytnite používateľom možnosť manuálne si vybrať preferovaný jazyk alebo región. Používajte vhodné formáty dátumu a času pre každú lokalitu.

4. A/B testovanie

Middleware sa môže použiť na implementáciu A/B testovania náhodným priraďovaním používateľov k rôznym variantom stránky a sledovaním ich správania. Tu je zjednodušený príklad:


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

function getRandomVariant() {
 return Math.random() < 0.5 ? 'A' : 'B';
}

export function middleware(request: NextRequest) {
 let variant = request.cookies.get('variant')?.value;

 if (!variant) {
 variant = getRandomVariant();
 const response = NextResponse.next();
 response.cookies.set('variant', variant);
 return response;
 }

 if (variant === 'B') {
 return NextResponse.rewrite(new URL('/variant-b', request.url));
 }

 return NextResponse.next();
}

export const config = {
 matcher: ['/'],
}

Tento middleware priraďuje používateľov buď k variantu 'A' alebo 'B'. Ak používateľ ešte nemá cookie variant, náhodne sa mu priradí a nastaví. Používatelia priradení k variantu 'B' sú presmerovaní na stránku /variant-b. Následne by ste sledovali výkon každého variantu, aby ste zistili, ktorý je efektívnejší.

Globálna perspektíva: Pri navrhovaní A/B testov zvážte kultúrne rozdiely. To, čo funguje dobre v jednom regióne, nemusí mať ohlas u používateľov v inom. Uistite sa, že vaša platforma na A/B testovanie je v súlade s predpismi o ochrane súkromia v rôznych regiónoch.

5. Feature Flags (Prepínače funkcií)

Feature flags vám umožňujú povoliť alebo zakázať funkcie vo vašej aplikácii bez nasadenia nového kódu. Middleware sa môže použiť na zistenie, či by mal mať používateľ prístup k špecifickej funkcii na základe jeho ID, polohy alebo iných kritérií.


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

export async function middleware(request: NextRequest) {
 // Príklad: Získanie feature flags z API
 const featureFlagsResponse = await fetch('https://api.example.com/featureflags', {
 headers: {
 'X-User-Id': 'user123',
 },
 });
 const featureFlags = await featureFlagsResponse.json();

 if (featureFlags.new_feature_enabled) {
 // Povolenie novej funkcie
 return NextResponse.next();
 } else {
 // Zakázanie novej funkcie (napr. presmerovanie na alternatívnu stránku)
 return NextResponse.redirect(new URL('/alternative-page', request.url));
 }
}

export const config = {
 matcher: ['/new-feature'],
}

Tento middleware získava feature flags z API a kontroluje, či je nastavený flag new_feature_enabled. Ak áno, používateľ má prístup na stránku /new-feature. V opačnom prípade je presmerovaný na /alternative-page.

Globálna perspektíva: Použite feature flags na postupné zavádzanie nových funkcií používateľom v rôznych regiónoch. To vám umožní sledovať výkon a riešiť akékoľvek problémy pred vydaním funkcie širšiemu publiku. Taktiež sa uistite, že váš systém feature flags sa škáluje globálne a poskytuje konzistentné výsledky bez ohľadu na polohu používateľa. Zvážte regionálne regulačné obmedzenia pre zavádzanie funkcií.

Pokročilé techniky

Reťazenie middleware

Môžete reťaziť viacero funkcií middleware, aby ste vykonali sériu operácií na jednej požiadavke. To môže byť užitočné na rozdelenie komplexnej logiky na menšie, lepšie spravovateľné moduly.


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

export function middleware(request: NextRequest) {
 const response = NextResponse.next();

 // Prvá funkcia middleware
 const token = request.cookies.get('auth_token');
 if (!token) {
 return NextResponse.redirect(new URL('/login', request.url))
 }

 // Druhá funkcia middleware
 response.headers.set('x-middleware-custom', 'value');

 return response;
}

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

Tento príklad ukazuje dva middleware v jednom. Prvý vykonáva autentifikáciu a druhý nastavuje vlastnú hlavičku.

Používanie premenných prostredia

Ukladajte citlivé informácie, ako sú API kľúče a databázové prihlasovacie údaje, do premenných prostredia namiesto ich pevného kódovania vo vašich middleware funkciách. To zlepšuje bezpečnosť a uľahčuje správu konfigurácie vašej aplikácie.


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

const API_KEY = process.env.API_KEY;

export async function middleware(request: NextRequest) {
 const response = await fetch('https://api.example.com/data', {
 headers: {
 'X-API-Key': API_KEY,
 },
 });

 // ...
}

export const config = {
 matcher: ['/data'],
}

V tomto príklade sa API_KEY získava z premennej prostredia.

Spracovanie chýb

Implementujte robustné spracovanie chýb vo vašich middleware funkciách, aby ste predišli neočakávaným chybám, ktoré by mohli zhodiť vašu aplikáciu. Používajte bloky try...catch na zachytenie výnimiek a primerané zaznamenávanie chýb.


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

export async function middleware(request: NextRequest) {
 try {
 const response = await fetch('https://api.example.com/data');
 // ...
 } catch (error) {
 console.error('Chyba pri získavaní dát:', error);
 return NextResponse.error(); // Alebo presmerovať na chybovú stránku
 }
}

export const config = {
 matcher: ['/data'],
}

Osvedčené postupy

Udržujte middleware funkcie odľahčené: Vyhnite sa vykonávaniu výpočtovo náročných operácií v middleware, pretože to môže ovplyvniť výkon. Presuňte komplexné spracovanie na úlohy na pozadí alebo dedikované služby.
Efektívne používajte matchers: Aplikujte middleware iba na trasy, ktoré to vyžadujú.
Dôkladne testujte váš middleware: Píšte jednotkové testy, aby ste sa uistili, že vaše middleware funkcie fungujú správne.
Monitorujte výkon middleware: Používajte monitorovacie nástroje na sledovanie výkonu vašich middleware funkcií a identifikáciu akýchkoľvek úzkych hrdiel.
Dokumentujte váš middleware: Jasne dokumentujte účel a funkcionalitu každej middleware funkcie.
Zvážte obmedzenia Edge Runtime: Buďte si vedomí obmedzení Edge Runtime, ako je napríklad nedostatok Node.js API. Prispôsobte svoj kód podľa toho.

Riešenie bežných problémov

Middleware sa nespúšťa: Dvakrát skontrolujte konfiguráciu matchera, aby ste sa uistili, že sa middleware aplikuje na správne trasy.
Problémy s výkonom: Identifikujte a optimalizujte pomalé middleware funkcie. Použite profilovacie nástroje na presné určenie úzkych hrdiel výkonu.
Kompatibilita s Edge Runtime: Uistite sa, že váš kód je kompatibilný s Edge Runtime. Vyhnite sa používaniu Node.js API, ktoré nie sú podporované.
Problémy s cookies: Overte, či sa cookies nastavujú a získavajú správne. Venujte pozornosť atribútom cookies ako domain, path a secure.
Konflikty hlavičiek: Dávajte si pozor na potenciálne konflikty hlavičiek pri nastavovaní vlastných hlavičiek v middleware. Uistite sa, že vaše hlavičky neprepisujú existujúce hlavičky neúmyselne.

Záver

Middleware v Next.js je výkonný nástroj na budovanie dynamických a personalizovaných webových aplikácií. Zvládnutím zachytávania požiadaviek môžete implementovať širokú škálu funkcií, od autentifikácie a autorizácie až po presmerovanie a A/B testovanie. Dodržiavaním osvedčených postupov uvedených v tomto sprievodcovi môžete využiť middleware v Next.js na vytváranie vysoko výkonných, bezpečných a škálovateľných aplikácií, ktoré spĺňajú potreby vašej globálnej používateľskej základne. Využite silu middleware na odomknutie nových možností vo vašich projektoch Next.js a poskytnite výnimočné používateľské zážitky.