Next.js Middleware:n reunatapaukset: Pyyntöjen muokkausmallien hallinta

Next.js middleware tarjoaa tehokkaan mekanismin pyyntöjen sieppaamiseen ja muokkaamiseen ennen kuin ne saavuttavat sovelluksesi reitit. Tämä ominaisuus avaa laajan valikoiman mahdollisuuksia yksinkertaisista todennustarkastuksista monimutkaisiin A/B-testausskenaarioihin ja kansainvälistämisstrategioihin. Middleware:n tehokas hyödyntäminen edellyttää kuitenkin sen reunatapauksien ja mahdollisten sudenkuoppien syvällistä ymmärtämistä. Tämä kattava opas tutkii edistyneitä pyyntöjen muokkausmalleja tarjoten käytännön esimerkkejä ja toteuttamiskelpoisia oivalluksia, jotka auttavat sinua rakentamaan vankkoja ja suorituskykyisiä Next.js-sovelluksia.

Next.js Middleware:n perusteiden ymmärtäminen

Ennen kuin sukellamme edistyneisiin malleihin, kerrataan Next.js middleware:n perusteet. Middleware-funktiot suoritetaan ennen pyynnön suorittamista, jolloin voit:

• Kirjoittaa URL-osoitteita uudelleen: Ohjata käyttäjät eri sivuille tiettyjen kriteerien perusteella.
• Uudelleenohjata käyttäjiä: Lähettää käyttäjät kokonaan eri URL-osoitteisiin, usein todennus- tai valtuutustarkoituksiin.
• Muokata otsikoita: Lisätä, poistaa tai päivittää HTTP-otsikoita.
• Vastaa suoraan: Palauttaa vastauksen suoraan middleware:sta ohittaen Next.js-reitit.

Middleware-funktiot sijaitsevat middleware.js- tai middleware.ts-tiedostossa /pages- tai /app-hakemistossasi (Next.js-versiostasi ja asennuksestasi riippuen). Ne vastaanottavat NextRequest-objektin, joka edustaa saapuvaa pyyntöä, ja voivat palauttaa NextResponse-objektin ohjatakseen myöhempää toimintaa.

Esimerkki: Perustason todennusmiddleware

Tämä esimerkki havainnollistaa yksinkertaista todennustarkistusta. Jos käyttäjää ei ole todennettu (esim. evästeessä ei ole kelvollista tokenia), hänet ohjataan kirjautumissivulle.

            
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const authToken = request.cookies.get('authToken')

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

  return NextResponse.next()
}

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

            

              
                Copy
              
            
          

Tämä middleware suoritetaan vain reiteille, jotka vastaavat /protected/:path*. Se tarkistaa, onko authToken-evästettä. Jos eväste puuttuu, käyttäjä ohjataan /login-sivulle. Muussa tapauksessa pyynnön annetaan jatkaa normaalisti käyttämällä NextResponse.next().

Edistyneet pyyntöjen muokkausmallit

Tutustutaan nyt joihinkin edistyneisiin pyyntöjen muokkausmalleihin, jotka esittelevät Next.js middleware:n todellisen tehon.

1. A/B-testaus evästeiden avulla

Esimerkki: A/B-testaus aloitussivulla

            
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const VARIANT_A = 'variantA'
const VARIANT_B = 'variantB'

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

  if (!variant) {
    // Randomly assign a variant
    variant = Math.random() < 0.5 ? VARIANT_A : VARIANT_B
    const response = NextResponse.next()
    response.cookies.set('variant', variant)
    return response
  }

  if (variant === VARIANT_A) {
    return NextResponse.rewrite(new URL('/variant-a', request.url))
  } else if (variant === VARIANT_B) {
    return NextResponse.rewrite(new URL('/variant-b', request.url))
  }

  return NextResponse.next()
}

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

            

              
                Copy
              
            
          

Tässä esimerkissä, kun käyttäjä vierailee juuripolulla (/) ensimmäistä kertaa, middleware määrittää hänet satunnaisesti joko variantA- tai variantB-muunnelmaan. Tämä muunnelma tallennetaan evästeeseen. Saman käyttäjän myöhemmät pyynnöt kirjoitetaan uudelleen joko /variant-a- tai /variant-b-polkuun määritetyn muunnelman mukaan. Tämän avulla voit tarjota erilaisia aloitussivuja ja seurata, mikä niistä toimii paremmin. Varmista, että Next.js-sovelluksessasi on määritetty reitit poluille /variant-a ja /variant-b.

Globaalit näkökohdat: Kun suoritat A/B-testausta, ota huomioon alueelliset erot. Pohjois-Amerikassa toimiva malli ei välttämättä ole yhtä tehokas Aasiassa. Voit käyttää maantieteellistä sijaintitietoa (hankittu IP-osoitteen haun tai käyttäjän asetusten kautta) räätälöidäksesi A/B-testin tietyille alueille.

2. Lokalisointi (i18n) URL-osoitteiden uudelleenkirjoituksilla

Kansainvälistäminen (i18n) on välttämätöntä maailmanlaajuisen yleisön tavoittamiseksi. Middleware:a voidaan käyttää automaattisesti tunnistamaan käyttäjän ensisijainen kieli ja ohjaamaan hänet sivustosi sopivaan lokalisoituun versioon.

Esimerkki: Uudelleenohjaus `Accept-Language`-otsikon perusteella

            
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const SUPPORTED_LANGUAGES = ['en', 'fr', 'es', 'de']
const DEFAULT_LANGUAGE = 'en'

function getPreferredLanguage(request: NextRequest): string {
  const acceptLanguage = request.headers.get('accept-language')
  if (!acceptLanguage) {
    return DEFAULT_LANGUAGE
  }

  const languages = acceptLanguage.split(',').map((lang) => lang.split(';')[0].trim())

  for (const lang of languages) {
    if (SUPPORTED_LANGUAGES.includes(lang)) {
      return lang
    }
  }

  return DEFAULT_LANGUAGE
}

export function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname

  // Check if there's an existing locale in the pathname
  if (
    SUPPORTED_LANGUAGES.some(
      (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
    )
  ) {
    return NextResponse.next()
  }

  const preferredLanguage = getPreferredLanguage(request)

  return NextResponse.redirect(
    new URL(`/${preferredLanguage}${pathname}`, request.url)
  )
}

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

            

              
                Copy
              
            
          

Tämä middleware poimii Accept-Language-otsikon pyynnöstä ja määrittää käyttäjän ensisijaisen kielen. Jos URL-osoite ei vielä sisällä kielen etuliitettä (esim. /en/about), middleware ohjaa käyttäjän sopivaan lokalisoituun URL-osoitteeseen (esim. /fr/about ranskaksi). Varmista, että sinulla on sopiva kansiorakenne /pages- tai /app-hakemistossasi eri kielialueille. Tarvitset esimerkiksi /pages/en/about.js- ja /pages/fr/about.js-tiedoston.

Globaalit näkökohdat: Varmista, että i18n-toteutuksesi käsittelee oikealta vasemmalle kirjoitettavia kieliä (esim. arabia, heprea) oikein. Harkitse myös Content Delivery Networkin (CDN) käyttämistä lokalisoidun materiaalin tarjoamiseen käyttäjiä lähempänä olevilta palvelimilta, mikä parantaa suorituskykyä.

3. Ominaisuusliput

Ominaisuuslippujen avulla voit ottaa ominaisuuksia käyttöön tai poistaa niitä käytöstä sovelluksessasi ilman uuden koodin käyttöönottoa. Tämä on erityisen hyödyllistä uusien ominaisuuksien asteittaiseen käyttöönottoon tai ominaisuuksien testaamiseen tuotantoympäristössä. Middleware:a voidaan käyttää tarkistamaan ominaisuuslipun tila ja muokkaamaan pyyntöä sen mukaisesti.

Esimerkki: Beta-ominaisuuden käyttöönotto

            
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const BETA_FEATURE_ENABLED = process.env.BETA_FEATURE_ENABLED === 'true'

export function middleware(request: NextRequest) {
  if (BETA_FEATURE_ENABLED && request.nextUrl.pathname.startsWith('/new-feature')) {
    return NextResponse.next()
  }

  // Optionally redirect to a "feature unavailable" page
  return NextResponse.rewrite(new URL('/feature-unavailable', request.url))
}

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

            

              
                Copy
              
            
          

Tämä middleware tarkistaa BETA_FEATURE_ENABLED-ympäristömuuttujan arvon. Jos sen arvoksi on asetettu true ja käyttäjä yrittää käyttää reittiä polun /new-feature alla, pyynnön annetaan jatkaa. Muussa tapauksessa käyttäjä ohjataan /feature-unavailable-sivulle. Muista määrittää ympäristömuuttujat asianmukaisesti eri ympäristöille (kehitys, testaus, tuotanto).

Globaalit näkökohdat: Kun käytät ominaisuuslippuja, ota huomioon oikeudelliset vaikutukset sellaisten ominaisuuksien käyttöönotosta, jotka eivät välttämättä ole säännösten mukaisia kaikilla alueilla. Esimerkiksi tietosuojaan liittyvät ominaisuudet on ehkä poistettava käytöstä tietyissä maissa.

4. Laitteen tunnistus ja mukautuva reititys

Nykyaikaisten verkkosovellusten on oltava responsiivisia ja mukautettava eri näyttökokoihin ja laitteiden ominaisuuksiin. Middleware:a voidaan käyttää tunnistamaan käyttäjän laitetyyppi ja ohjaamaan hänet sivustosi optimoituihin versioihin.

Esimerkki: Mobiilikäyttäjien ohjaaminen mobiilioptimoidulle aliverkkotunnukselle

            
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { device } from 'detection'

export function middleware(request: NextRequest) {
  const userAgent = request.headers.get('user-agent')

  if (userAgent) {
    const deviceType = device(userAgent)

    if (deviceType.type === 'phone') {
      const mobileUrl = new URL(request.url)
      mobileUrl.hostname = 'm.example.com'
      return NextResponse.redirect(mobileUrl)
    }
  }

  return NextResponse.next()
}

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

            

              
                Copy
              
            
          

Tämä esimerkki käyttää `detection`-kirjastoa käyttäjän laitetyypin määrittämiseen User-Agent-otsikon perusteella. Jos käyttäjä on matkapuhelimella, hänet ohjataan m.example.com-aliverkkotunnukselle (olettaen, että sinulla on siellä isännöity sivustosi mobiilioptimoitu versio). Muista asentaa `detection`-paketti: `npm install detection`.

Globaalit näkökohdat: Varmista, että laitettunnistuslogiikkasi ottaa huomioon alueelliset erot laitteiden käytössä. Esimerkiksi peruspuhelimet ovat edelleen yleisiä joissakin kehitysmaissa. Harkitse User-Agent-tunnistuksen ja responsiivisen suunnittelun tekniikoiden yhdistelmän käyttämistä vankemman ratkaisun saamiseksi.

5. Pyynnön otsikon rikastaminen

Middleware voi lisätä tietoja pyynnön otsikoihin ennen kuin sovellusreittisi käsittelevät niitä. Tämä on hyödyllistä mukautetun metatiedon, kuten käyttäjäroolien, todennustilan tai pyyntötunnusten, lisäämiseen, joita sovelluslogiikkasi voi käyttää.

Esimerkki: Pyyntötunnuksen lisääminen

            
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { v4 as uuidv4 } from 'uuid'

export function middleware(request: NextRequest) {
  const requestId = uuidv4()
  const response = NextResponse.next()
  response.headers.set('x-request-id', requestId)
  return response
}

export const config = {
  matcher: ['/api/:path*'], // Only apply to API routes
}

            

              
                Copy