Support for Next.js on Bull Board

[allisson-lima]

Hello, Bull Board team!

I'm trying to integrate Bull Board with Next.js using App Router, but I'm facing difficulties due to the dependency on Express, which is not compatible with Next.js directly.

I would like to suggest that Bull Board offers native support for Next.js, without relying on Express. This would include the ability to configure and manipulate Bull Board routes directly within the Next.js environment, without the need to create a separate server or adapt flows.

[felixmosh]

Hi, woukd you like to create a Next.js server adapter?

[allisson-lima]

I would like to create an adapter for Next.js, but some examples I found in the issues are not working.

Do you have any effective example that works with the current version of Next.js?

[felixmosh]

Nope, I don't have, and don't know how to integrate it into Next.js, this is why I've asked you :]

[allisson-lima]

I’ll make an adaptation now and test it.

If it works, I’ll add it to the issue here. Please wait a moment while I add the example to help the community.

Thank you for the feedback!

[allisson-lima]

I managed to run the project in Next.js using Hono, as there is compatibility between Hono and Vercel.

I was able to set up the configuration and use it in both development mode and local production.
However, the implementation on Vercel is encountering issues with the @bull-board/ui/package.json module, as it cannot be found.

I believe that if the implementation is done on a VM, it might be possible to manually copy the @bull-board/ui module to the node_modules folder as a workaround for this issue.

Below is an example of the code in Next.js 15 using the App Router, as implemented locally:

Dependencies: @bull-board/hono, @bull-board/ui, hono, @hono/node-server/serve-static

// src/app/api/admin/queues/[[...index]]/route.ts

import { createBullBoard } from "@bull-board/api";
import { BullMQAdapter } from "@bull-board/api/bullMQAdapter";
import messageQueue from "@/lib/bull/queues/messageQueue";
import replyQueue from "@/lib/bull/queues/replyQueue";
import { HonoAdapter } from "@bull-board/hono";
import { serveStatic } from "@hono/node-server/serve-static";
import { Hono } from "hono";
import { showRoutes } from "hono/dev";

import { handle } from "hono/vercel";

export const dynamic = "force-dynamic";

const basePathAdapter = "/api/admin/queues";
const basePathHono = "/admin/queues";

const app = new Hono().basePath("/api");

const serverAdapter = new HonoAdapter(serveStatic);

async function setupBullBoard() {
createBullBoard({
queues: [new BullMQAdapter(messageQueue), new BullMQAdapter(replyQueue)],
serverAdapter,
});

serverAdapter.setBasePath(basePathAdapter);
}

setupBullBoard().catch(console.error);

app.route(basePathHono, serverAdapter.registerPlugin());

showRoutes(app);

const handler = handle(app);

export const GET = handler;
export const POST = handler;
export const PUT = handler;

[allisson-lima]

I will leave the evidence in the production environment.

I intend to resolve this issue or attempt to create an adapter necessary for the Next.js and Vercel environment.