Next.js Starpniekprogrammatūra: Pieprasījumu Pārtveršanas Apgūšana Dinamiskām Lietotnēm

Next.js starpniekprogrammatūra nodrošina elastīgu un jaudīgu veidu, kā pārtvert un modificēt ienākošos pieprasījumus, pirms tie sasniedz jūsu maršrutus. Šī iespēja ļauj jums ieviest plašu funkciju klāstu, sākot ar autentifikāciju un autorizāciju līdz pāradresācijai un A/B testēšanai, vienlaikus optimizējot veiktspēju. Šī visaptverošā rokasgrāmata iepazīstinās jūs ar Next.js starpniekprogrammatūras pamatkoncepcijām un parādīs, kā to efektīvi izmantot.

Kas ir Next.js Starpniekprogrammatūra?

Starpniekprogrammatūra Next.js ir funkcija, kas tiek izpildīta pirms pieprasījuma pabeigšanas. Tā ļauj jums:

Pārtvert pieprasījumus: Pārbaudīt ienākošā pieprasījuma galvenes, sīkdatnes un URL.
Modificēt pieprasījumus: Pārrakstīt URL, iestatīt galvenes vai pāradresēt lietotājus, pamatojoties uz konkrētiem kritērijiem.
Izpildīt kodu: Palaist servera puses loģiku pirms lapas renderēšanas.

Starpniekprogrammatūras funkcijas tiek definētas middleware.ts (vai middleware.js) failā jūsu projekta saknes direktorijā. Tās tiek izpildītas katram maršrutam jūsu lietotnē vai konkrētiem maršrutiem, pamatojoties uz konfigurējamiem meklētājiem (matchers).

Pamatjēdzieni un Priekšrocības

Pieprasījuma (Request) Objekts

request objekts nodrošina piekļuvi informācijai par ienākošo pieprasījumu, ieskaitot:

request.url: Pilns pieprasījuma URL.
request.method: HTTP metode (piem., GET, POST).
request.headers: Objekts, kas satur pieprasījuma galvenes.
request.cookies: Objekts, kas attēlo pieprasījuma sīkdatnes.
request.geo: Nodrošina ar pieprasījumu saistītos ģeolokācijas datus, ja tie ir pieejami.

Atbildes (Response) Objekts

Starpniekprogrammatūras funkcijas atgriež Response objektu, lai kontrolētu pieprasījuma iznākumu. Jūs varat izmantot šādas atbildes:

NextResponse.next(): Turpina pieprasījuma apstrādi normāli, ļaujot tam sasniegt paredzēto maršrutu.
NextResponse.redirect(url): Pāradresē lietotāju uz citu URL.
NextResponse.rewrite(url): Pārraksta pieprasījuma URL, efektīvi pasniedzot citu lapu bez pāradresācijas. URL pārlūkprogrammā paliek nemainīgs.
Pielāgota Response objekta atgriešana: Ļauj pasniegt pielāgotu saturu, piemēram, kļūdas lapu vai konkrētu JSON atbildi.

Meklētāji (Matchers)

Meklētāji ļauj norādīt, kuriem maršrutiem jūsu starpniekprogrammatūra ir jāpiemēro. Jūs varat definēt meklētājus, izmantojot regulārās izteiksmes vai ceļu modeļus. Tas nodrošina, ka jūsu starpniekprogrammatūra darbojas tikai tad, kad tas ir nepieciešams, uzlabojot veiktspēju un samazinot papildu slodzi.

Edge Runtime

Next.js starpniekprogrammatūra darbojas Edge Runtime vidē, kas ir viegla JavaScript izpildes vide, ko var izvietot tuvu jūsu lietotājiem. Šī tuvība samazina latentumu un uzlabo jūsu lietotnes kopējo veiktspēju, īpaši globāli izkliedētiem lietotājiem. Edge Runtime ir pieejams Vercel Edge tīklā un citās saderīgās platformās. Edge Runtime ir daži ierobežojumi, īpaši attiecībā uz Node.js API izmantošanu.

Praktiski Piemēri: Starpniekprogrammatūras Funkciju Ieviešana

1. Autentifikācija

Autentifikācijas starpniekprogrammatūru var izmantot, lai aizsargātu maršrutus, kuriem nepieciešama lietotāju pieteikšanās. Šeit ir piemērs, kā ieviest autentifikāciju, izmantojot sīkdatnes:


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

Šī starpniekprogrammatūra pārbauda auth_token sīkdatnes esamību. Ja sīkdatne nav atrasta, lietotājs tiek pāradresēts uz /login lapu. config.matcher norāda, ka šai starpniekprogrammatūrai jādarbojas tikai maršrutos zem /dashboard.

Globālā perspektīva: Pielāgojiet autentifikācijas loģiku, lai atbalstītu dažādas autentifikācijas metodes (piem., OAuth, JWT) un integrētos ar dažādiem identitātes nodrošinātājiem (piem., Google, Facebook, Azure AD), lai apmierinātu lietotāju vajadzības no dažādiem reģioniem.

2. Autorizācija

Autorizācijas starpniekprogrammatūru var izmantot, lai kontrolētu piekļuvi resursiem, pamatojoties uz lietotāju lomām vai atļaujām. Piemēram, jums varētu būt administratora panelis, kuram var piekļūt tikai konkrēti lietotāji.


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

 // Piemērs: Iegūstiet lietotāju lomas no API (aizstājiet ar savu faktisko loģiku)
 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*'],
}

Šī starpniekprogrammatūra iegūst lietotāja lomu un pārbauda, vai viņam ir admin loma. Ja nē, viņš tiek pāradresēts uz /unauthorized lapu. Šis piemērs izmanto viettura API galapunktu. Aizstājiet `https://api.example.com/userinfo` ar savu faktisko autentifikācijas servera galapunktu.

Globālā perspektīva: Apstrādājot lietotāju datus, ievērojiet datu privātuma noteikumus (piem., GDPR, CCPA). Ieviesiet atbilstošus drošības pasākumus, lai aizsargātu sensitīvu informāciju un nodrošinātu atbilstību vietējiem likumiem.

3. Pāradresācija

Pāradresācijas starpniekprogrammatūru var izmantot, lai pāradresētu lietotājus, pamatojoties uz viņu atrašanās vietu, valodu vai citiem kritērijiem. Piemēram, jūs varētu pāradresēt lietotājus uz lokalizētu vietnes versiju, pamatojoties uz viņu IP adresi.


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

export function middleware(request: NextRequest) {
 const country = request.geo?.country || 'US'; // Ja ģeolokācija neizdodas, pēc noklusējuma izmanto ASV

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

Šī starpniekprogrammatūra pārbauda lietotāja valsti, pamatojoties uz viņa IP adresi, un pāradresē viņu uz atbilstošo lokalizēto vietnes versiju (/de Vācijai, /fr Francijai). Ja ģeolokācija neizdodas, pēc noklusējuma tiek izmantota ASV versija. Ņemiet vērā, ka tas ir atkarīgs no tā, vai ir pieejama ģeolokācijas īpašība (piem., izvietojot Vercel platformā).

Globālā perspektīva: Nodrošiniet, lai jūsu vietne atbalstītu vairākas valodas un valūtas. Nodrošiniet lietotājiem iespēju manuāli izvēlēties vēlamo valodu vai reģionu. Katrai lokalizācijai izmantojiet atbilstošus datuma un laika formātus.

4. A/B Testēšana

Starpniekprogrammatūru var izmantot, lai ieviestu A/B testēšanu, nejauši piešķirot lietotājus dažādiem lapas variantiem un sekojot līdzi viņu uzvedībai. Šeit ir vienkāršots piemērs:


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

Šī starpniekprogrammatūra piešķir lietotājus vai nu 'A', vai 'B' variantam. Ja lietotājam vēl nav variant sīkdatnes, tā tiek nejauši piešķirta un iestatīta. Lietotāji, kuriem piešķirts 'B' variants, tiek pārrakstīti uz /variant-b lapu. Jums būtu tad jāseko katra varianta veiktspējai, lai noteiktu, kurš no tiem ir efektīvāks.

Globālā perspektīva: Projektējot A/B testus, ņemiet vērā kultūras atšķirības. Tas, kas labi darbojas vienā reģionā, var neatbilst lietotāju gaumei citā. Pārliecinieties, ka jūsu A/B testēšanas platforma atbilst privātuma noteikumiem dažādos reģionos.

5. Funkciju Karodziņi (Feature Flags)

Funkciju karodziņi ļauj jums ieslēgt vai izslēgt funkcijas jūsu lietotnē, neizvietojot jaunu kodu. Starpniekprogrammatūru var izmantot, lai noteiktu, vai lietotājam ir jābūt piekļuvei konkrētai funkcijai, pamatojoties uz viņa lietotāja ID, atrašanās vietu vai citiem kritērijiem.


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

export async function middleware(request: NextRequest) {
 // Piemērs: Iegūstiet funkciju karodziņus no 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) {
 // Iespējot jauno funkciju
 return NextResponse.next();
 } else {
 // Atspējot jauno funkciju (piem., pāradresēt uz alternatīvu lapu)
 return NextResponse.redirect(new URL('/alternative-page', request.url));
 }
}

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

Šī starpniekprogrammatūra iegūst funkciju karodziņus no API un pārbauda, vai ir iestatīts new_feature_enabled karodziņš. Ja ir, lietotājs var piekļūt /new-feature lapai. Pretējā gadījumā viņš tiek pāradresēts uz /alternative-page.

Globālā perspektīva: Izmantojiet funkciju karodziņus, lai pakāpeniski ieviestu jaunas funkcijas lietotājiem dažādos reģionos. Tas ļauj jums pārraudzīt veiktspēju un novērst jebkādas problēmas, pirms funkcija tiek izlaista plašākai auditorijai. Tāpat nodrošiniet, ka jūsu funkciju karodziņu sistēma ir globāli mērogojama un nodrošina konsekventus rezultātus neatkarīgi no lietotāja atrašanās vietas. Apsveriet reģionālos regulatīvos ierobežojumus funkciju ieviešanai.

Padziļinātas Tehnikas

Starpniekprogrammatūru Sasaistīšana (Chaining)

Jūs varat sasaistīt vairākas starpniekprogrammatūras funkcijas, lai veiktu virkni darbību ar pieprasījumu. Tas var būt noderīgi, lai sadalītu sarežģītu loģiku mazākos, vieglāk pārvaldāmos moduļos.


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

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

 // Pirmā starpniekprogrammatūras funkcija
 const token = request.cookies.get('auth_token');
 if (!token) {
 return NextResponse.redirect(new URL('/login', request.url))
 }

 // Otrā starpniekprogrammatūras funkcija
 response.headers.set('x-middleware-custom', 'value');

 return response;
}

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

Šis piemērs parāda divas starpniekprogrammatūras vienā. Pirmā veic autentifikāciju, bet otrā iestata pielāgotu galveni.

Vides Mainīgo Izmantošana

Glabājiet sensitīvu informāciju, piemēram, API atslēgas un datu bāzes akreditācijas datus, vides mainīgajos, nevis cietkodējot tos savās starpniekprogrammatūras funkcijās. Tas uzlabo drošību un atvieglo jūsu lietotnes konfigurācijas pārvaldību.


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

Šajā piemērā API_KEY tiek iegūta no vides mainīgā.

Kļūdu Apstrāde

Ieviesiet robustu kļūdu apstrādi savās starpniekprogrammatūras funkcijās, lai novērstu neparedzētas kļūdas, kas varētu izraisīt jūsu lietotnes avāriju. Izmantojiet try...catch blokus, lai notvertu izņēmumus un atbilstoši reģistrētu kļūdas.


// 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(); // Vai pāradresēt uz kļūdas lapu
 }
}

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

Labākās Prakses

Uzturiet starpniekprogrammatūras funkcijas vieglas: Izvairieties no skaitļošanas ziņā intensīvu darbību veikšanas starpniekprogrammatūrā, jo tas var ietekmēt veiktspēju. Pārnesiet sarežģītu apstrādi uz fona uzdevumiem vai specializētiem pakalpojumiem.
Efektīvi izmantojiet meklētājus: Piemērojiet starpniekprogrammatūru tikai tiem maršrutiem, kuriem tā ir nepieciešama.
Rūpīgi pārbaudiet savu starpniekprogrammatūru: Rakstiet vienības testus, lai nodrošinātu, ka jūsu starpniekprogrammatūras funkcijas darbojas pareizi.
Pārraugiet starpniekprogrammatūras veiktspēju: Izmantojiet pārraudzības rīkus, lai sekotu līdzi savu starpniekprogrammatūras funkciju veiktspējai un identificētu jebkādus vājos posmus.
Dokumentējiet savu starpniekprogrammatūru: Skaidri dokumentējiet katras starpniekprogrammatūras funkcijas mērķi un funkcionalitāti.
Apsveriet Edge Runtime ierobežojumus: Apzinieties Edge Runtime ierobežojumus, piemēram, Node.js API trūkumu. Attiecīgi pielāgojiet savu kodu.

Biežāko Problēmu Novēršana

Starpniekprogrammatūra nedarbojas: Vēlreiz pārbaudiet savu meklētāja konfigurāciju, lai pārliecinātos, ka starpniekprogrammatūra tiek piemērota pareizajiem maršrutiem.
Veiktspējas problēmas: Identificējiet un optimizējiet lēnas starpniekprogrammatūras funkcijas. Izmantojiet profilēšanas rīkus, lai precīzi noteiktu veiktspējas vājos posmus.
Edge Runtime saderība: Pārliecinieties, ka jūsu kods ir saderīgs ar Edge Runtime. Izvairieties no neatbalstītu Node.js API izmantošanas.
Problēmas ar sīkdatnēm: Pārbaudiet, vai sīkdatnes tiek pareizi iestatītas un iegūtas. Pievērsiet uzmanību sīkdatņu atribūtiem, piemēram, domain, path un secure.
Galveņu konflikti: Apzinieties iespējamos galveņu konfliktus, iestatot pielāgotas galvenes starpniekprogrammatūrā. Pārliecinieties, ka jūsu galvenes netīši nepārraksta esošās galvenes.

Noslēgums

Next.js starpniekprogrammatūra ir jaudīgs rīks dinamisku un personalizētu tīmekļa lietotņu veidošanai. Apgūstot pieprasījumu pārtveršanu, jūs varat ieviest plašu funkciju klāstu, sākot no autentifikācijas un autorizācijas līdz pāradresācijai un A/B testēšanai. Ievērojot šajā rokasgrāmatā izklāstītās labākās prakses, jūs varat izmantot Next.js starpniekprogrammatūru, lai izveidotu augstas veiktspējas, drošas un mērogojamas lietotnes, kas atbilst jūsu globālās lietotāju bāzes vajadzībām. Izmantojiet starpniekprogrammatūras spēku, lai atklātu jaunas iespējas savos Next.js projektos un sniegtu izcilu lietotāja pieredzi.