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#
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 :
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 :
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 :
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 :
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 :
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 :
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.
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#
- Rendu à la demande Next.js — Expérience de développement de type PHP, aucune étape de construction
- Présentation des frameworks – quand choisir Next.js vs PRISM vs un autre adaptateur
- Mise en cache — comment le cache ISR de bext interagit avec
revalidateTag - Des flux durables — travail en arrière-plan de longue durée via la file d'attente
- Tâches planifiées — enregistrement cron à partir de n'importe quel adaptateur
Links#
- prochainjs.org — Documentation officielle de Next.js