bext.dev
DocsFramework Integrations
Framework Integrations3 min read
On this page

Next.js Integration

The @bext/nextjs package provides direct access to bext's platform services from your Next.js application.

Installation#

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

Peer dependencies: next >= 14.0.0, react >= 18.0.0

Cache Invalidation#

Invalidate ISR-cached pages by tag or path:

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}`);
}

Real-Time Pub/Sub#

Push events to connected browsers:

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);
}

KV Store#

Persistent key-value storage with optional TTL:

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)

Durable Queues#

Background job processing with delivery guarantees:

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);
}

Data Cache (unstable_cache)#

A drop-in replacement for Next.js unstable_cache backed by bext's KV store — works across multiple 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} />;
}

Unlike Next.js's built-in unstable_cache, this version is backed by bext's distributed KV store, so cached values are shared across all instances.

Scheduled Tasks#

Register cron-style tasks:

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");

Transform Pipeline#

When bext detects Next.js, it applies 14 source transforms automatically:

Transform Purpose
ImportStrip Remove type-only imports
BarrelOptimize Tree-shake barrel exports
FontOptimize Optimize next/font loading
CacheDirective Process "use cache" directives
ServerBoundary Mark "use server" boundaries
ServerActions Transform server action functions
FlowExtract Extract Flow type annotations
EnvInline Inline process.env.* values
PostProcess Post-render cleanup
CssModule Process CSS modules
AliasRewrite Resolve module path aliases
ProcessPolyfill Polyfill Node.js process
UseRouterPatch Patch useRouter hooks
ShimInject Inject framework shims

These transforms run at build time and during dev — no configuration needed.

Tip

If you want to skip the next build step entirely and have pages compile on first request instead, see Next.js on-demand rendering.

Edit this page ↗Need a hand? ↗
FIND YOUR NEXT STEP

Start with a topic, a command, or a question.