M

MLOG

Italiano

Esplora Next.js Edge Config: una potente soluzione per distribuire configurazioni globalmente con velocità ed efficienza. Impara a ottimizzare la tua applicazione con la configurazione dinamica all'edge.

Next.js Edge Config: Distribuzione della Configurazione Globale Semplificata

Nel panorama odierno dello sviluppo web, in rapida evoluzione, fornire esperienze personalizzate e dinamiche agli utenti di tutto il mondo è cruciale. Next.js, un popolare framework React, offre una soluzione robusta per creare applicazioni web performanti e scalabili. Una delle sue funzionalità chiave è Edge Config, un potente strumento per gestire e distribuire la configurazione a livello globale all'edge. Questo post del blog fornisce una guida completa per comprendere e utilizzare Next.js Edge Config per ottimizzare le prestazioni della tua applicazione e offrire esperienze su misura al tuo pubblico globale.

Cos'è Next.js Edge Config?

Next.js Edge Config è un archivio chiave-valore a bassa latenza, distribuito a livello globale, progettato specificamente per fornire dati di configurazione alle Edge Functions di Next.js. A differenza dei database o delle API tradizionali, Edge Config è ottimizzato per velocità ed efficienza, consentendoti di accedere ai dati di configurazione in millisecondi da qualsiasi parte del mondo. Questo ti permette di regolare dinamicamente il comportamento della tua applicazione in base ai valori di configurazione, senza sacrificare le prestazioni.

Pensalo come un file JSON replicato a livello globale che puoi interrogare incredibilmente velocemente dalle Edge Functions. Questo lo rende ideale per:

Perché Usare Edge Config?

Ecco i principali vantaggi dell'utilizzo di Next.js Edge Config:

Come Iniziare con Edge Config

Ecco una guida passo-passo per iniziare a usare Next.js Edge Config:

1. Impostazione del Progetto

Assicurati di avere un progetto Next.js. In caso contrario, creane uno usando:

npx create-next-app@latest my-app
cd my-app

2. Creare un Edge Config

Avrai bisogno di un account Vercel per usare Edge Config. Una volta effettuato l'accesso, vai al tuo progetto Vercel e crea un nuovo Edge Config. Dagli un nome descrittivo.

3. Installare l'SDK di Edge Config

Installa l'SDK @vercel/edge-config nel tuo progetto Next.js:

npm install @vercel/edge-config
# or
yarn add @vercel/edge-config
# or
pnpm install @vercel/edge-config

4. Configurare le Variabili d'Ambiente

Dovrai configurare la variabile d'ambiente EDGE_CONFIG. Puoi trovare il valore di questa variabile nella dashboard di Vercel per il tuo Edge Config. Aggiungila al tuo file .env.local (o alle impostazioni del tuo progetto Vercel per la produzione):

EDGE_CONFIG=your_edge_config_url

Importante: Non includere mai il tuo file .env.local nel repository. Usa le impostazioni delle variabili d'ambiente di Vercel per gli ambienti di produzione.

5. Accedere ai Valori di Configurazione nel Codice

Ora puoi accedere ai valori del tuo Edge Config nel tuo codice Next.js. Ecco un esempio:

// pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const featureFlag = await get('featureFlag');
  const welcomeMessage = await get('welcomeMessage');

  return {
    props: {
      featureFlag,
      welcomeMessage,
    },
  };
}

export default function Home({ featureFlag, welcomeMessage }) {
  return (
    <div>
      <h1>{welcomeMessage}</h1>
      {featureFlag ? <p>Feature is enabled!</p> : <p>Feature is disabled.</p>}
    </div>
  );
}

In questo esempio, stiamo recuperando i valori di featureFlag e welcomeMessage dall'Edge Config in getServerSideProps. Questi valori vengono quindi passati come props al componente Home.

6. Aggiornare i Valori di Configurazione

Puoi aggiornare i valori nel tuo Edge Config tramite la dashboard di Vercel. Le modifiche vengono propagate a livello globale in pochi millisecondi.

Casi d'Uso Avanzati ed Esempi

A/B Testing con Edge Config

Edge Config è perfetto per l'A/B testing. Puoi definire un valore di configurazione che determina quale versione della tua applicazione servire a un utente. Per esempio:

  1. Crea un Edge Config con una chiave chiamata abTestGroup.
  2. Imposta il valore su A o B.
  3. Nella tua Edge Function, leggi il valore abTestGroup.
  4. In base al valore, servi la versione A o la versione B del tuo contenuto.

Ecco un esempio:

// pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const abTestGroup = await get('abTestGroup');

  let content;
  if (abTestGroup === 'A') {
    content = 'This is version A!';
  } else {
    content = 'This is version B!';
  }

  return {
    props: {
      content,
    },
  };
}

export default function Home({ content }) {
  return (
    <div>
      <h1>A/B Test</h1>
      <p>{content}</p>
    </div>
  );
}

Puoi utilizzare strumenti di analisi per monitorare le prestazioni di ciascuna versione e determinare quale versione funziona meglio. Considera strumenti come Google Analytics, Amplitude o Mixpanel per una raccolta e analisi completa dei dati di A/B testing.

Feature Flags con Edge Config

I feature flag ti consentono di abilitare o disabilitare funzionalità senza dover distribuire nuovo codice. Questo è utile per testare nuove funzionalità in produzione o per rilasciarle gradualmente a un sottoinsieme di utenti. Similmente all'A/B testing, puoi controllare la disponibilità di una funzionalità con un semplice flag booleano nel tuo Edge Config.

  1. Crea un Edge Config con una chiave chiamata newFeatureEnabled.
  2. Imposta il valore su true o false.
  3. Nella tua Edge Function, leggi il valore newFeatureEnabled.
  4. In base al valore, abilita o disabilita la nuova funzionalità.
// components/MyComponent.js
import { get } from '@vercel/edge-config';

export async function MyComponent() {
  const newFeatureEnabled = await get('newFeatureEnabled');

  return (
    <div>
      {newFeatureEnabled ? <p>New feature is enabled!</p> : <p>New feature is disabled.</p>}
    </div>
  );
}

export default MyComponent;

Personalizzazione con Edge Config

Puoi utilizzare Edge Config per personalizzare contenuti ed esperienze in base alle preferenze o alla posizione dell'utente. Ad esempio, puoi memorizzare le preferenze dell'utente in un database e quindi utilizzare Edge Config per servire contenuti diversi in base a tali preferenze.

Scenario di Esempio: Un sito di e-commerce globale vuole mostrare raccomandazioni di prodotti in base al paese dell'utente. Potrebbe utilizzare un Edge Config per mappare i paesi alle categorie di raccomandazione.

  1. Crea un Edge Config con una chiave chiamata countryToCategoryMap.
  2. Imposta il valore su un oggetto JSON che mappa i paesi alle categorie di prodotti (es. {"US": "Electronics", "GB": "Fashion", "JP": "Home Goods"}).
  3. Nella tua Edge Function, leggi il valore countryToCategoryMap.
  4. Determina il paese dell'utente (es. dal suo indirizzo IP o da un cookie).
  5. Usa countryToCategoryMap per determinare la categoria di prodotto appropriata.
  6. Mostra le raccomandazioni di prodotto di quella categoria.
// pages/products.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps(context) {
  const countryToCategoryMap = await get('countryToCategoryMap');
  const country = context.req.headers['x-vercel-ip-country'] || 'US'; // Default su US
  const category = countryToCategoryMap[country] || 'General'; // Default su General

  // Recupera le raccomandazioni di prodotto in base alla categoria
  const products = await fetchProducts(category);

  return {
    props: {
      products,
    },
  };
}

export default function Products({ products }) {
  return (
    <div>
      <h1>Product Recommendations</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts(category) {
  // Sostituisci con la tua logica effettiva di recupero prodotti
  return [
    { id: 1, name: `Product 1 (${category})` },
    { id: 2, name: `Product 2 (${category})` },
  ];
}

Questo esempio utilizza l'header x-vercel-ip-country per determinare il paese dell'utente. Questo header viene aggiunto automaticamente da Vercel. È importante notare che affidarsi esclusivamente alla geolocalizzazione basata su IP potrebbe non essere sempre accurato. Considera l'utilizzo di altri metodi come la posizione fornita dall'utente o servizi di geolocalizzazione più sofisticati per una maggiore precisione.

Routing Geografico con Edge Config

Puoi indirizzare gli utenti a risorse diverse in base alla loro posizione utilizzando Edge Config. Ciò è utile per servire contenuti localizzati o per conformarsi alle normative regionali.

  1. Crea un Edge Config con una chiave chiamata countryToRedirectMap.
  2. Imposta il valore su un oggetto JSON che mappa i paesi agli URL (es. {"CN": "/china", "DE": "/germany"}).
  3. Nella tua Edge Function, leggi il valore countryToRedirectMap.
  4. Determina il paese dell'utente (es. dal suo indirizzo IP).
  5. Reindirizza l'utente all'URL appropriato.
// pages/_middleware.js
import { NextResponse } from 'next/server'
import { get } from '@vercel/edge-config';

export async function middleware(req) {
  const countryToRedirectMap = await get('countryToRedirectMap');
  const country = req.geo.country || 'US'; // Default su US
  const redirectUrl = countryToRedirectMap[country];

  if (redirectUrl) {
    return NextResponse.redirect(new URL(redirectUrl, req.url))
  }

  return NextResponse.next()
}

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

Questo esempio utilizza la proprietà req.geo.country, che viene popolata automaticamente dalla Edge Network di Vercel con il codice del paese dell'utente. Questo è un approccio più pulito e affidabile rispetto all'analisi diretta dell'header x-vercel-ip-country. La funzione middleware controlla se è definito un URL di reindirizzamento per il paese dell'utente nell'Edge Config. In caso affermativo, reindirizza l'utente a tale URL. Altrimenti, continua l'elaborazione della richiesta.

Rate Limiting con Edge Config

Sebbene Edge Config non sia progettato per essere una soluzione di rate limiting completa, puoi utilizzarlo in combinazione con altre tecniche per implementare un rate limiting di base. L'idea è di memorizzare i parametri di rate limiting (es. richieste al minuto) in Edge Config e poi usare tali parametri nelle tue Edge Functions per applicare i limiti.

Nota Importante: Questo approccio è adatto a scenari di rate limiting semplici. Per un rate limiting più robusto, considera l'utilizzo di servizi o middleware dedicati.

  1. Crea un Edge Config con chiavi come requestsPerMinute e blockedIps.
  2. Imposta il valore di requestsPerMinute al limite di richieste desiderato.
  3. Imposta il valore di blockedIps su un array di indirizzi IP che dovrebbero essere bloccati.
  4. Nella tua Edge Function, leggi i valori requestsPerMinute e blockedIps.
  5. Controlla se l'indirizzo IP dell'utente è nell'array blockedIps. In caso affermativo, blocca la richiesta.
  6. Utilizza un meccanismo di caching (es. Redis o la Edge Cache di Vercel) per tracciare il numero di richieste da ciascun indirizzo IP nell'ultimo minuto.
  7. Se il numero di richieste dall'indirizzo IP dell'utente supera il limite requestsPerMinute, blocca la richiesta.

Esempio (Illustrativo - Richiede un'Implementazione Aggiuntiva per il Caching):

// pages/api/protected-route.js
import { get } from '@vercel/edge-config';

export default async function handler(req, res) {
  const requestsPerMinute = await get('requestsPerMinute');
  const blockedIps = await get('blockedIps');
  const ip = req.headers['x-real-ip'] || req.connection.remoteAddress; // Ottieni l'IP dell'utente

  // Controlla se l'IP è bloccato
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Too Many Requests');
  }

  // TODO: Implementare il conteggio delle richieste e il caching (es. usando Redis o la Vercel Edge Cache)
  // Esempio (Concettuale):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Too Many Requests');
  // }
  // await incrementRequestCount(ip);

  // La tua logica della rotta protetta qui
  res.status(200).send('Protected route accessed successfully!');
}

Considerazioni Importanti per il Rate Limiting:

Best Practice per l'Uso di Edge Config

Alternative a Edge Config

Sebbene Edge Config sia uno strumento potente, non è sempre la soluzione migliore per ogni caso d'uso. Ecco alcune alternative da considerare:

Conclusione

Next.js Edge Config è un potente strumento per gestire e distribuire la configurazione a livello globale all'edge. Sfruttando Edge Config, puoi ottimizzare le prestazioni della tua applicazione, offrire esperienze personalizzate e semplificare il tuo flusso di lavoro di gestione della configurazione. Che tu stia costruendo un sito di e-commerce globale, una piattaforma di social media o qualsiasi altro tipo di applicazione web, Edge Config può aiutarti a offrire un'esperienza veloce e coinvolgente ai tuoi utenti in tutto il mondo. Esplora le possibilità e integra Edge Config nei tuoi progetti Next.js oggi stesso per sbloccarne il potenziale!