Next.js vahevara aheldamine: järjestikuse päringute töötlemise selgitus

Next.js vahevara pakub võimsat mehhanismi sissetulevate päringute pealtkuulamiseks ja muutmiseks enne, kui need jõuavad teie rakenduse marsruutideni. Vahevara funktsioonid töötavad servas (edge), võimaldades jõudsat ja globaalselt hajutatud päringute töötlemist. Üks Next.js vahevara peamisi tugevusi on selle aheldamise võime, mis võimaldab teil määratleda toimingute jada, mida iga päring peab läbima. See järjestikune töötlemine on ülioluline ülesannete jaoks nagu autentimine, autoriseerimine, päringute muutmine ja A/B testimine.

Next.js vahevara mõistmine

Enne aheldamisse sukeldumist kordame üle Next.js vahevara põhitõed. Vahevarad Next.js-is on funktsioonid, mis käivitatakse enne päringu lõpuleviimist. Neil on juurdepääs sissetulevale päringule ja nad saavad sooritada toiminguid nagu:

• Ümberkirjutamine: URL-i muutmine teise lehe serveerimiseks.
• Ümbersuunamine: Kasutaja saatmine teisele URL-ile.
• Päiste muutmine: Päringu- ja vastusepäiste lisamine või muutmine.
• Autentimine: Kasutaja identiteedi kontrollimine ja juurdepääsu andmine.
• Autoriseerimine: Kasutaja õiguste kontrollimine konkreetsetele ressurssidele juurdepääsemiseks.

Vahevara funktsioonid on defineeritud `middleware.ts` (või `middleware.js`) failis, mis asub teie projekti juurkataloogis. Vahevara funktsiooni põhistruktuur on järgmine:

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

// Seda funktsiooni saab märkida `async`, kui kasutate `await` selle sees
export function middleware(request: NextRequest) {
  // ... teie vahevara loogika siin ...
  return NextResponse.next()
}

// Lisateabe saamiseks vaadake allpool "Vastavad teed" (Matching Paths)
export const config = {
  matcher: '/about/:path*',
}

            

              
                Copy
              
            
          

Selle struktuuri põhikomponendid on:

• `middleware` funktsioon: See on tuumfunktsioon, mis käivitub iga vastava päringu puhul. See saab `NextRequest` objekti, mis esindab sissetulevat päringut.
• `NextResponse`: See objekt võimaldab teil päringut või vastust muuta. `NextResponse.next()` edastab päringu järgmisele vahevarale või marsruudi käsitlejale. Teised meetodid hõlmavad `NextResponse.redirect()` ja `NextResponse.rewrite()`.
• `config`: See objekt määratleb teed või mustrid, millele vahevara peaks rakenduma. `matcher` omadus kasutab teid, et määrata, millistele marsruutidele vahevara kehtib.

Aheldamise jõud: järjestikune päringute töötlemine

Vahevara aheldamine võimaldab teil luua toimingute jada, mis käivitatakse iga päringu puhul kindlas järjekorras. See on eriti kasulik keerukate töövoogude jaoks, kus on vaja mitmeid kontrolle ja muudatusi. Kujutage ette stsenaariumi, kus peate:

1. Autentima kasutaja.
2. Autoriseerima kasutaja juurdepääsu konkreetsele ressursile.
3. Muutma päringu päiseid, et lisada kasutajapõhist teavet.

Vahevara aheldamisega saate igaühe neist sammudest rakendada eraldi vahevara funktsioonidena ja tagada, et need täidetakse õiges järjekorras.

Vahevara aheldamise rakendamine

Kuigi Next.js ei paku otseselt sisseehitatud aheldamismehhanismi, saate aheldamise saavutada, kasutades ühte `middleware.ts` faili ja struktureerides oma loogikat vastavalt. Funktsioon `NextResponse.next()` on võtmetähtsusega kontrolli edasiandmiseks teie töötlemisliini järgmisele etapile.

Siin on levinud muster:

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

async function authenticate(request: NextRequest): Promise<NextResponse | null> {
  // Autentimisloogika (nt JWT-tõendi kontrollimine)
  const token = request.cookies.get('token')

  if (!token) {
    // Kui pole autenditud, suuna sisselogimislehele
    const url = new URL(`/login`, request.url)
    return NextResponse.redirect(url)
  }

  return NextResponse.next()
}

async function authorize(request: NextRequest): Promise<NextResponse | null> {
  // Autoriseerimisloogika (nt kasutaja rollide või õiguste kontrollimine)
  const userRole = 'admin'; // Asenda tegeliku kasutajarolli hankimisega
  const requiredRole = 'admin';

  if (userRole !== requiredRole) {
    // Kui pole autoriseeritud, suuna volitamata lehele
    const url = new URL(`/unauthorized`, request.url)
    return NextResponse.redirect(url)
  }

  return NextResponse.next()
}

async function modifyHeaders(request: NextRequest): Promise<NextResponse | null> {
  // Päringu päiste muutmine (nt kasutaja ID lisamine)
  const userId = '12345'; // Asenda tegeliku kasutaja ID hankimisega

  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-user-id', userId);

  const response = NextResponse.next({request: {headers: requestHeaders}});

  response.headers.set('x-middleware-custom', 'value')

  return response;
}

export async function middleware(request: NextRequest) {
  // Vahevara funktsioonide aheldamine
  const authenticationResult = await authenticate(request);
  if (authenticationResult) return authenticationResult;

  const authorizationResult = await authorize(request);
  if (authorizationResult) return authorizationResult;

  const modifyHeadersResult = await modifyHeaders(request);
  if (modifyHeadersResult) return modifyHeadersResult;

  return NextResponse.next();
}

export const config = {
  matcher: '/protected/:path*',
}

            

              
                Copy
              
            
          

Selles näites:

• Määratleme kolm eraldi vahevara funktsiooni: `authenticate`, `authorize` ja `modifyHeaders`.
• Iga funktsioon täidab konkreetset ülesannet ja tagastab kas `NextResponse.next()`, et jätkata töötlemist, või `NextResponse.redirect()`, et kasutaja ümber suunata.
• `middleware` funktsioon aheldab need funktsioonid kokku, kutsudes neid järjestikku ja kontrollides nende tulemusi.
• `config` objekt määrab, et see vahevara peaks kehtima ainult marsruutidele, mis asuvad `/protected` tee all.

Veatöötlus vahevara ahelates

Tõhus veatöötlus on vahevara ahelates ülioluline ootamatu käitumise vältimiseks. Kui vahevara funktsioonil tekib viga, peaks see sellega sujuvalt toime tulema ja vältima ahela katkemist. Kaaluge neid strateegiaid:

• Try-Catch plokid: Mähi iga vahevara funktsiooni loogika try-catch plokki, et püüda kinni kõik erandid.
• Veavastused: Kui ilmneb viga, tagastage spetsiifiline veavastus (nt 401 Unauthorized või 500 Internal Server Error) rakenduse kokkujooksmise asemel.
• Logimine: Logige vigu, et aidata silumisel ja jälgimisel. Kasutage tugevat logimissüsteemi, mis suudab salvestada üksikasjalikku veateavet ja jälgida täitmise voogu.

Siin on näide veatöötlusest `authenticate` vahevaras:

            async function authenticate(request: NextRequest): Promise<NextResponse | null> {
  try {
    // Autentimisloogika (nt JWT-tõendi kontrollimine)
    const token = request.cookies.get('token')

    if (!token) {
      // Kui pole autenditud, suuna sisselogimislehele
      const url = new URL(`/login`, request.url)
      return NextResponse.redirect(url)
    }

    // ... edasised autentimise sammud ...

    return NextResponse.next()
  } catch (error) {
    console.error('Autentimisviga:', error);
    // Suuna vealehele või tagasta 500 viga
    const url = new URL(`/error`, request.url)
    return NextResponse.redirect(url)
    // Alternatiivselt tagasta JSON vastus
    //return NextResponse.json({ message: 'Autentimine ebaõnnestus' }, { status: 401 });
  }
}

            

              
                Copy
              
            
          

Täiustatud aheldamistehnikad

Lisaks põhilisele järjestikusele töötlemisele saate rakendada keerukamate stsenaariumide käsitlemiseks täiustatud aheldamistehnikaid:

Tingimuslik aheldamine

Määrake dünaamiliselt, milliseid vahevara funktsioone käivitada, lähtudes konkreetsetest tingimustest. Näiteks võite soovida rakendada erinevaid autoriseerimisreegleid sõltuvalt kasutaja rollist või taotletud ressursist.

            async function middleware(request: NextRequest) {
  const userRole = 'admin'; // Asenda tegeliku kasutajarolli hankimisega

  if (userRole === 'admin') {
    // Rakenda admin-spetsiifilist vahevara
    const authorizationResult = await authorizeAdmin(request);
    if (authorizationResult) return authorizationResult;
  } else {
    // Rakenda tavakasutaja vahevara
    const authorizationResult = await authorizeUser(request);
    if (authorizationResult) return authorizationResult;
  }

  return NextResponse.next();
}

            

              
                Copy
              
            
          

Vahevara tehased (Middleware Factories)

Looge funktsioone, mis genereerivad konkreetsete konfiguratsioonidega vahevara funktsioone. See võimaldab teil vahevara loogikat taaskasutada erinevate parameetritega.

            function createAuthorizeMiddleware(requiredRole: string) {
  return async function authorize(request: NextRequest): Promise<NextResponse | null> {
    // Autoriseerimisloogika (nt kasutaja rollide või õiguste kontrollimine)
    const userRole = 'editor'; // Asenda tegeliku kasutajarolli hankimisega

    if (userRole !== requiredRole) {
      // Kui pole autoriseeritud, suuna volitamata lehele
      const url = new URL(`/unauthorized`, request.url)
      return NextResponse.redirect(url)
    }

    return NextResponse.next()
  }
}

export async function middleware(request: NextRequest) {
  const authorizeEditor = createAuthorizeMiddleware('editor');
  const authorizationResult = await authorizeEditor(request);
  if (authorizationResult) return authorizationResult;

  return NextResponse.next();
}

            

              
                Copy
              
            
          

Reaalse maailma kasutusjuhud

Vahevara aheldamine on rakendatav paljude stsenaariumide puhul Next.js rakendustes:

• Autentimine ja autoriseerimine: Rakendage tugevaid autentimis- ja autoriseerimistöövooge tundlike ressursside kaitsmiseks.
• Funktsioonilipud (Feature Flags): Lülitage funktsioone dünaamiliselt sisse või välja vastavalt kasutajasegmentidele või A/B testimisele. Serveerige funktsiooni erinevaid versioone erinevatele kasutajagruppidele ja mõõtke nende mõju.
• Lokaliseerimine: Määrake kasutaja eelistatud keel ja suunake ta saidi vastavasse lokaliseeritud versiooni. Kohandage sisu ja kasutajakogemust vastavalt kasutaja asukohale ja keele-eelistustele.
• Päringute logimine: Logige sissetulevaid päringuid ja vastuseid auditeerimise ja jälgimise eesmärgil. Jäädvustage päringu üksikasjad, kasutajateave ja vastuseajad jõudluse analüüsiks.
• Botituvastus: Tuvastage ja blokeerige pahatahtlike bottide juurdepääs teie rakendusele. Analüüsige päringute mustreid ja kasutajakäitumist, et eristada legitiimseid kasutajaid automatiseeritud bottidest.

Näide: globaalne e-kaubanduse platvorm

Kujutage ette globaalset e-kaubanduse platvormi, mis peab käsitlema erinevaid nõudeid vastavalt kasutaja asukohale ja eelistustele. Vahevara ahelat saaks kasutada, et:

1. Tuvastada kasutaja asukoht tema IP-aadressi põhjal.
2. Määrata kasutaja eelistatud keel brauseri seadete või küpsiste põhjal.
3. Suunata kasutaja saidi vastavasse lokaliseeritud versiooni (nt `/en-US`, `/fr-CA`, `/de-DE`).
4. Seada sobiv valuuta vastavalt kasutaja asukohale.
5. Rakendada piirkonnapõhiseid kampaaniaid või allahindlusi.

Parimad praktikad vahevara aheldamisel

Et tagada hooldatavad ja jõudsad vahevara ahelad, järgige neid parimaid praktikaid:

• Hoidke vahevara funktsioonid väikesed ja fokusseeritud: Igal vahevara funktsioonil peaks olema üks vastutusala, et parandada loetavust ja testitavust. Jaotage keeruline loogika väiksemateks, hallatavateks funktsioonideks.
• Vältige blokeerivaid operatsioone: Minimeerige blokeerivaid operatsioone (nt sünkroonne I/O), et vältida jõudluse kitsaskohti. Kasutage jõudluse optimeerimiseks asünkroonseid operatsioone ja vahemälu.
• Vahemälustage tulemusi: Vahemälustage kulukate operatsioonide (nt andmebaasipäringute) tulemusi, et vähendada latentsust ja parandada jõudlust. Rakendage vahemälustrateegiaid, et minimeerida koormust taustasüsteemi ressurssidele.
• Testige põhjalikult: Kirjutage iga vahevara funktsiooni jaoks ühiktestid, et tagada selle ootuspärane käitumine. Kasutage integratsiooniteste, et kontrollida vahevara ahela terviklikku käitumist.
• Dokumenteerige oma vahevara: Dokumenteerige selgelt iga vahevara funktsiooni eesmärk ja käitumine, et parandada hooldatavust. Pakkuge selgeid selgitusi loogika, sõltuvuste ja võimalike kõrvalmõjude kohta.
• Arvestage jõudluse mõjudega: Mõistke iga vahevara funktsiooni jõudluse mõju ja optimeerige vastavalt. Mõõtke iga vahevara funktsiooni täitmisaega ja tuvastage potentsiaalsed kitsaskohad.
• Jälgige oma vahevara: Jälgige oma vahevara jõudlust ja veamäärasid tootmises, et tuvastada ja lahendada probleeme. Seadistage hoiatused, et teavitada teid jõudluse halvenemisest või vigadest.

Alternatiivid vahevara aheldamisele

Kuigi vahevara aheldamine on võimas tehnika, on sõltuvalt teie konkreetsetest nõuetest kaaluda ka alternatiivseid lähenemisviise:

• Marsruudi käsitlejad (Route Handlers): Tehke päringute töötlemise loogikat otse oma marsruudi käsitlejates. See lähenemine võib olla lihtsamate stsenaariumide jaoks lihtsam, kuid võib keerukamate töövoogude puhul põhjustada koodi dubleerimist.
• API marsruudid (API Routes): Looge spetsiifiliste ülesannete, näiteks autentimise või autoriseerimise, käsitlemiseks pühendatud API marsruute. See võib pakkuda paremat vastutusalade eraldamist, kuid võib suurendada teie rakenduse keerukust.
• Serverikomponendid (Server Components): Kasutage serverikomponente serveripoolse andmete hankimise ja loogika teostamiseks. See võib olla hea valik dünaamilise sisu renderdamiseks, kuid ei pruugi sobida igat tüüpi päringute töötlemiseks.

Kokkuvõte

Next.js vahevara aheldamine pakub paindlikku ja võimsat viisi järjestikuse päringute töötlemise rakendamiseks. Mõistes vahevara põhitõdesid ja rakendades parimaid praktikaid, saate luua tugevaid ja jõudsaid rakendusi, mis vastavad kaasaegse veebiarenduse nõudmistele. Hoolikas planeerimine, modulaarne disain ja põhjalik testimine on tõhusate vahevara ahelate ehitamise võti.