M

MLOG

Eesti

Avastage Next.js-i vahevara – võimas funktsioon sissetulevate päringute pealtkuulamiseks ja muutmiseks. Õppige praktiliste näidete abil, kuidas rakendada autentimist, autoriseerimist, ümbersuunamist ja A/B testimist.

Next.js Vahevara: Päringute Pealtkuulamise Meisterlik Kasutus Dünaamilistes Rakendustes

Next.js'i vahevara (middleware) pakub paindlikku ja võimast viisi sissetulevate päringute pealtkuulamiseks ja muutmiseks enne, kui need jõuavad teie marsruutideni. See võimekus võimaldab teil rakendada laia valikut funktsioone, alates autentimisest ja autoriseerimisest kuni ümbersuunamise ja A/B testimiseni, optimeerides samal ajal jõudlust. See põhjalik juhend tutvustab teile Next.js'i vahevara põhikontseptsioone ja näitab, kuidas seda tõhusalt ära kasutada.

Mis on Next.js Vahevara?

Vahevara Next.js'is on funktsioon, mis käivitatakse enne päringu lõpuleviimist. See võimaldab teil:

Vahevara funktsioonid defineeritakse middleware.ts (või middleware.js) failis teie projekti juurkataloogis. Neid käivitatakse iga marsruudi jaoks teie rakenduses või spetsiifiliste marsruutide jaoks, tuginedes seadistatavatele vastendajatele (matchers).

Põhimõisted ja Eelised

Päringuobjekt (Request Object)

request-objekt annab juurdepääsu teabele sissetuleva päringu kohta, sealhulgas:

Vastusobjekt (Response Object)

Vahevara funktsioonid tagastavad Response-objekti, et kontrollida päringu tulemust. Saate kasutada järgmisi vastuseid:

Vastendajad (Matchers)

Vastendajad võimaldavad teil määrata, millistele marsruutidele teie vahevara tuleks rakendada. Saate defineerida vastendajaid regulaaravaldiste või teekonnamustrite abil. See tagab, et teie vahevara töötab ainult vajaduse korral, parandades jõudlust ja vähendades lisakoormust.

Edge Runtime

Next.js'i vahevara töötab Edge Runtime'is, mis on kergekaaluline JavaScripti käituskeskkond, mida saab paigutada kasutajatele lähedale. See lähedus minimeerib latentsust ja parandab teie rakenduse üldist jõudlust, eriti globaalselt hajutatud kasutajate jaoks. Edge Runtime on saadaval Verceli Edge Networkis ja teistel ühilduvatel platvormidel. Edge Runtime'il on mõned piirangud, eriti Node.js API-de kasutamisel.

Praktilised Näited: Vahevara Funktsioonide Rakendamine

1. Autentimine

Autentimisvahevara saab kasutada marsruutide kaitsmiseks, mis nõuavad kasutajate sisselogimist. Siin on näide, kuidas rakendada autentimist küpsiste abil:


// 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*'],
}

See vahevara kontrollib auth_token küpsise olemasolu. Kui küpsist ei leita, suunatakse kasutaja /login lehele. config.matcher määrab, et see vahevara peaks töötama ainult /dashboard all olevate marsruutide jaoks.

Globaalne perspektiiv: Kohandage autentimisloogikat, et toetada erinevaid autentimismeetodeid (nt OAuth, JWT) ja integreeruda erinevate identiteedipakkujatega (nt Google, Facebook, Azure AD), et rahuldada eri piirkondadest pärit kasutajate vajadusi.

2. Autoriseerimine

Autoriseerimisvahevara saab kasutada ressurssidele juurdepääsu kontrollimiseks kasutajarollide või lubade alusel. Näiteks võib teil olla administraatori armatuurlaud, millele pääsevad juurde ainult teatud kasutajad.


// 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))
 }

 // Näide: Kasutajarollide pärimine API-st (asendage oma tegeliku loogikaga)
 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*'],
}

See vahevara hangib kasutaja rolli ja kontrollib, kas tal on admin roll. Kui ei, suunatakse ta /unauthorized lehele. See näide kasutab API kohatäite lõpp-punkti. Asendage `https://api.example.com/userinfo` oma tegeliku autentimisserveri lõpp-punktiga.

Globaalne perspektiiv: Olge kasutajaandmete käsitlemisel teadlik andmekaitsealastest määrustest (nt GDPR, CCPA). Rakendage asjakohaseid turvameetmeid tundliku teabe kaitsmiseks ja kohalike seaduste järgimise tagamiseks.

3. Ümbersuunamine

Ümbersuunamisvahevara saab kasutada kasutajate ümbersuunamiseks nende asukoha, keele või muude kriteeriumide alusel. Näiteks võite suunata kasutajad oma veebisaidi lokaliseeritud versioonile nende IP-aadressi põhjal.


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

export function middleware(request: NextRequest) {
 const country = request.geo?.country || 'US'; // Vaikimisi USA, kui geoasukoha määramine ebaõnnestub

 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: ['/'],
}

See vahevara kontrollib kasutaja riiki tema IP-aadressi põhjal ja suunab ta veebisaidi vastavasse lokaliseeritud versiooni (/de Saksamaa jaoks, /fr Prantsusmaa jaoks). Kui geoasukoha määramine ebaõnnestub, kasutatakse vaikimisi USA versiooni. Pange tähele, et see sõltub geo-atribuudi saadavusest (nt Vercelis juurutamisel).

Globaalne perspektiiv: Veenduge, et teie veebisait toetab mitut keelt ja valuutat. Pakkuge kasutajatele võimalust käsitsi valida oma eelistatud keel või piirkond. Kasutage iga lokaadi jaoks sobivaid kuupäeva- ja ajavorminguid.

4. A/B testimine

Vahevara saab kasutada A/B testimise rakendamiseks, määrates kasutajad juhuslikult lehe erinevatele variantidele ja jälgides nende käitumist. Siin on lihtsustatud näide:


// 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: ['/'],
}

See vahevara määrab kasutajad kas variandile 'A' või 'B'. Kui kasutajal pole veel variant küpsist, määratakse see juhuslikult ja salvestatakse. Variandile 'B' määratud kasutajate päring kirjutatakse ümber /variant-b lehele. Seejärel jälgiksite iga variandi toimivust, et teha kindlaks, kumb on tõhusam.

Globaalne perspektiiv: Võtke A/B testide kavandamisel arvesse kultuurilisi erinevusi. Mis töötab hästi ühes piirkonnas, ei pruugi resoneeruda kasutajatega teises. Veenduge, et teie A/B testimise platvorm vastab erinevate piirkondade privaatsusmäärustele.

5. Funktsioonilipud (Feature Flags)

Funktsioonilipud võimaldavad teil oma rakenduses funktsioone sisse või välja lülitada ilma uut koodi juurutamata. Vahevara saab kasutada, et määrata, kas kasutajal peaks olema juurdepääs konkreetsele funktsioonile tema kasutajatunnuse, asukoha või muude kriteeriumide alusel.


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

export async function middleware(request: NextRequest) {
 // Näide: Funktsioonilippude pärimine API-st
 const featureFlagsResponse = await fetch('https://api.example.com/featureflags', {
 headers: {
 'X-User-Id': 'user123',
 },
 });
 const featureFlags = await featureFlagsResponse.json();

 if (featureFlags.new_feature_enabled) {
 // Lülita uus funktsioon sisse
 return NextResponse.next();
 } else {
 // Lülita uus funktsioon välja (nt suuna alternatiivsele lehele)
 return NextResponse.redirect(new URL('/alternative-page', request.url));
 }
}

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

See vahevara pärib API-st funktsioonilipud ja kontrollib, kas new_feature_enabled lipp on seatud. Kui on, pääseb kasutaja ligi /new-feature lehele. Vastasel juhul suunatakse ta /alternative-page lehele.

Globaalne perspektiiv: Kasutage funktsioonilippe uute funktsioonide järkjärguliseks kasutuselevõtuks eri piirkondade kasutajatele. See võimaldab teil jälgida jõudlust ja lahendada kõik probleemid enne funktsiooni laiemale publikule väljastamist. Samuti veenduge, et teie funktsioonilippude süsteem skaleeruks globaalselt ja pakuks järjepidevaid tulemusi olenemata kasutaja asukohast. Arvestage funktsioonide kasutuselevõtul piirkondlike regulatiivsete piirangutega.

Täpsemad Tehnikad

Vahevarade Aheldamine

Saate aheldada mitu vahevara funktsiooni, et teostada päringuga mitmeid järjestikuseid toiminguid. See võib olla kasulik keeruka loogika jaotamiseks väiksemateks, paremini hallatavateks mooduliteks.


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

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

 // Esimene vahevara funktsioon
 const token = request.cookies.get('auth_token');
 if (!token) {
 return NextResponse.redirect(new URL('/login', request.url))
 }

 // Teine vahevara funktsioon
 response.headers.set('x-middleware-custom', 'value');

 return response;
}

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

See näide näitab kahte vahevara ühes. Esimene teostab autentimise ja teine seab kohandatud päise.

Keskkonnamuutujate Kasutamine

Hoidke tundlikku teavet, nagu API-võtmed ja andmebaasi mandaadid, keskkonnamuutujates, selle asemel et neid oma vahevara funktsioonidesse koodi sisse kirjutada. See parandab turvalisust ja muudab rakenduse konfiguratsiooni haldamise lihtsamaks.


// 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'],
}

Selles näites hangitakse API_KEY keskkonnamuutujast.

Vigade Käsitlemine

Rakendage oma vahevara funktsioonides robustne veakäsitlus, et vältida ootamatute vigade tõttu rakenduse kokkujooksmist. Kasutage erandite püüdmiseks ja vigade asjakohaseks logimiseks try...catch plokke.


// 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('Error fetching data:', error);
 return NextResponse.error(); // Või suunake vealehele
 }
}

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

Parimad Praktikad

Levinud Probleemide Lahendamine

Kokkuvõte

Next.js'i vahevara on võimas tööriist dünaamiliste ja isikupärastatud veebirakenduste loomiseks. Päringute pealtkuulamist meisterlikult vallates saate rakendada laia valikut funktsioone, alates autentimisest ja autoriseerimisest kuni ümbersuunamise ja A/B testimiseni. Järgides selles juhendis toodud parimaid praktikaid, saate Next.js'i vahevara abil luua suure jõudlusega, turvalisi ja skaleeritavaid rakendusi, mis vastavad teie globaalse kasutajaskonna vajadustele. Kasutage vahevara võimsust, et avada uusi võimalusi oma Next.js'i projektides ja pakkuda erakordseid kasutajakogemusi.