ENbext.dev
DocumentationIntégrations de frameworks

Traduction automatique depuis l’anglais. Consulter l’original.

Sur cette page

Intégration Next.js

Le package @bext/nextjs fournit un accès direct aux services de la plateforme bext à partir de votre application Next.js.

Installation#

bash
npm install @bext/nextjs
# or
bun add @bext/nextjs

Dépendances homologues : next >= 14.0.0, react >= 18.0.0

Invalidation du cache#

Invalidez les pages mises en cache ISR par balise ou chemin :

typescript
import { revalidateTag, revalidatePath } from "@bext/nextjs";

// In a Server Action or Route Handler
export async function updateProduct(id: string) {
  await db.products.update(id, data);

  // Purge all pages tagged with "products"
  await revalidateTag("products");

  // Or purge a specific path
  await revalidatePath(`/products/${id}`);
}

Pub/Sub en temps réel#

Transférer les événements vers les navigateurs connectés :

typescript
import { publish } from "@bext/nextjs";

export async function POST(request: Request) {
  const order = await createOrder(request);

  // Push to all subscribers on the "orders" topic
  await publish("orders", {
    id: order.id,
    status: "created",
    total: order.total,
  });

  return Response.json(order);
}

Magasin KV#

Stockage clé-valeur persistant avec TTL en option :

typescript
import { kv } from "@bext/nextjs";

// Store a value (TTL in seconds)
await kv.set("user:123:preferences", { theme: "dark", lang: "en" }, 86400);

// Retrieve
const prefs = await kv.get<{ theme: string; lang: string }>("user:123:preferences");

// Delete
await kv.delete("user:123:preferences");

// List keys with prefix
const result = await kv.list({ prefix: "user:123:", limit: 100 });
// result.keys: string[]
// result.cursor?: string (for pagination)

Files d'attente durables#

Traitement des tâches en arrière-plan avec garanties de livraison :

typescript
import { queue } from "@bext/nextjs";

// Enqueue a job
await queue.push("email-notifications", {
  to: "user@example.com",
  subject: "Order Confirmed",
  template: "order-confirmation",
  data: { orderId: "abc-123" },
});

// In a worker/cron handler — pull and acknowledge
const message = await queue.pull<{ to: string; template: string }>("email-notifications");
if (message) {
  await sendEmail(message.data);
  await queue.ack("email-notifications", message.id);
}

Cache de données (unstable_cache)#

Un remplacement immédiat pour Next.js unstable_cache soutenu par le magasin KV de bext — fonctionne sur plusieurs instances :

typescript
import { unstable_cache } from "@bext/nextjs";

const getProducts = unstable_cache(
  async (category: string) => {
    return db.products.findMany({ where: { category } });
  },
  ["products-by-category"],
  {
    tags: ["products"],
    revalidate: 3600, // seconds
  }
);

// Use in a Server Component
export default async function ProductsPage({ params }) {
  const products = await getProducts(params.category);
  return <ProductList items={products} />;
}

Contrairement au unstable_cache intégré de Next.js, cette version est soutenue par le magasin KV distribué de bext, de sorte que les valeurs mises en cache sont partagées entre toutes les instances.

Tâches planifiées#

Enregistrez les tâches de style cron :

typescript
import { tasks } from "@bext/nextjs";

// Register a task
await tasks.register("daily-report", {
  cron: "0 9 * * 1-5",  // 9 AM weekdays
  command: "https://myapp.com/api/cron/daily-report",
});

// List all tasks
const allTasks = await tasks.list();

// Cancel a task
await tasks.cancel("daily-report");

Transformer le pipeline#

Lorsque bext détecte Next.js, il applique automatiquement 14 transformations source :

Transformer But
ImportStrip Supprimer les importations de type uniquement
BarrelOptimize Exportations de barils de secousses d'arbre
PoliceOptimiser Optimiser le chargement du next/font
CacheDirective Traiter les directives "use cache"
Limite du serveur Marquer les limites "use server"
Actions du serveur Transformer les fonctions d'action du serveur
Extrait de flux Extraire les annotations de type Flux
EnvInline Valeurs process.env.* en ligne
Post-traitement Nettoyage après le rendu
Module CSS Traiter les modules CSS
AliasRéécriture Résoudre les alias de chemin de module
ProcessusPolyfill Polyfill Node.js process
UtiliserRouterPatch Patch useRouter crochets
CaleInjecter Injecter des cales de cadre

Ces transformations s'exécutent au moment de la construction et pendant le développement — aucune configuration n'est nécessaire.

Conseil

Si vous souhaitez ignorer complètement l’étape next build et compiler les pages à la première demande, consultez Rendu à la demande Next.js.

En rapport#

Modifier cette page ↗Besoin d’aide ? ↗
Rechercher dans la documentation

Saisissez un sujet, une commande ou une question.