Next.js Discord

Discord Forum

Has anyone integrated BullBoard (BullMQ dashboard) into their NextJS project?

Answered
Komondor posted this in #help-forum
Open in Discord
KomondorOP
I'm having trouble getting BullBoard (https://github.com/felixmosh/bull-board) set up in my NextJS 14 project. It doesn't look like it supports NextJS. The closest example of how to get it set up is using express server. So I got it setup working in an express server (running on port 3001 while my nextjs app is running on port 3000).

But has anyone successfully set it up running under their nextjs app?
Answered by Komondor
I got it to work in NextJS 14 but it's hacky and now I think express is handling all api routes ?

This is what I did:

Using nextjs14, add a pages\api directory
Create file bullBoardApi.ts and paste this in it
import { createBullBoard } from '@bull-board/api';
import { BullMQAdapter } from '@bull-board/api/bullMQAdapter';
import { ExpressAdapter } from '@bull-board/express';
import { DefaultQueue } from '@/src/bullmq/queues';
import express from "express";


const basePath = "/api/bullBoardApi/";

const serverAdapter = new ExpressAdapter();
serverAdapter.setBasePath(basePath);

createBullBoard({
  queues: [
      new BullMQAdapter(DefaultQueue),
    ],
  serverAdapter: serverAdapter,
});

const handler = express().use(basePath, serverAdapter.getRouter());

export default handler;


(Now this is where the api paths get hijacked)
Create a [...path].js file in the same directory (pages/api) and paste the same contents as the file above.
View full answer

1 Reply

KomondorOP
I got it to work in NextJS 14 but it's hacky and now I think express is handling all api routes ?

This is what I did:

Using nextjs14, add a pages\api directory
Create file bullBoardApi.ts and paste this in it
import { createBullBoard } from '@bull-board/api';
import { BullMQAdapter } from '@bull-board/api/bullMQAdapter';
import { ExpressAdapter } from '@bull-board/express';
import { DefaultQueue } from '@/src/bullmq/queues';
import express from "express";


const basePath = "/api/bullBoardApi/";

const serverAdapter = new ExpressAdapter();
serverAdapter.setBasePath(basePath);

createBullBoard({
  queues: [
      new BullMQAdapter(DefaultQueue),
    ],
  serverAdapter: serverAdapter,
});

const handler = express().use(basePath, serverAdapter.getRouter());

export default handler;


(Now this is where the api paths get hijacked)
Create a [...path].js file in the same directory (pages/api) and paste the same contents as the file above.
Answer