npm i queuebase zod
You can get these from the Queuebase dashboard.
# .env.local
NEXT_PUBLIC_QUEUEBASE_API_KEY=... # Your Queuebase API key
QUEUEBASE_SECRET_KEY=... # Your Queuebase secret key
All jobs in Queuebase are associated with a route. The example below is a very simple of example of creating a job router.
// api/queuebase/core.ts
import { type JobRouter as QueuebaseJobRouter } from "queuebase/lib/types";
import { createQueuebase } from "queuebase/next";
import { z } from "zod";
export const jobRouter = {
sayHello: j().handler(() => {
console.log("Hello there!");
}),
} satisfies QueuebaseJobRouter;
export type JobRouter = typeof jobRouter;
When a job is triggered, Queuebase will send a POST request to this endpoint with the job name and any job parameters needed. This route MUST match the route you defined in the dashboard.
// api/queuebase/route.ts
import { createRouteHandler } from "queuebase/next";
import { jobRouter } from "./core";
export const { POST } = createRouteHandler({
router: jobRouter,
});
Here's where the magic happens. The jobs
object contains all your jobs defined in your router and allows you trigger them. Oh, and did we mention it's completely type-safe?
// utils/queuebase.ts
import type { JobRouter } from "@/app/api/queuebase/core";
import { createQueuebaseClient } from "queuebase/client";
export const { jobs } = createQueuebaseClient<JobRouter>({
apiKey: process.env.NEXT_PUBLIC_QUEUEBASE_API_KEY!,
});
In a client component:
// app/execute-job.tsx
"use client";
import { jobs } from "@/utils/queuebase";
export default function ExecuteJob() {
return (
<button
className="px h-10 rounded-md border bg-emerald-600 px-4 py-2 text-white"
onClick={() => {
jobs("sayHello").enqueue();
}}>
Execute job without input
</button>
);
}
In a server action:
"use server";
import { jobs } from "@/utils/queuebase";
export default async function executeServer() {
await jobs("sayHello").enqueue();
}