Working with bull-board in Nextjs

[GodsonAddy]

I would be glad if anyone could help implement the bull-board in the Nextjs app. I can't seem to make it work.

This is my code:

pages/api/auth/admin/queues

import { createRouter, expressWrapper } from "next-connect";
import { post } from "../../../../queue.js";
import { createBullBoard } from "@bull-board/api";
import { BullAdapter } from "@bull-board/api/bullAdapter";
import { ExpressAdapter } from "@bull-board/express";
const router = createRouter();

const serverAdapter = new ExpressAdapter();

createBullBoard({
  queues: [new BullAdapter(post)],
  serverAdapter: serverAdapter,
});

serverAdapter.setBasePath("/api/auth/admin/queues");

router
  .use(expressWrapper(serverAdapter.getRouter()))
  .get(async (req, res, next) => {
    return res.status(200).json();
  });

export default router.handler({
  onError: (err, req, res) => {
    console.error(err.stack);
    res.status(500).json({ message: `Bullboard Error` });
  },
  onNoMatch: (req, res) => {
    res.status(404).json({ message: "Bullboard not found" });
  },
});

./queue.js

import Queue from "bull";
import dotenv from "dotenv";

dotenv.config();

const post = new Queue("post", {
  redis: process.env.REDIS_URL,
});

export {
post
};

[GodsonAddy]

So this is how I solved it. I downloaded express and changed the basePath of the bull-board UI from pages/api/auth/admin/queues.js to pages/api/auth/admin/queues/[[...index]].js

/pages/api/auth/admin/queues/[[...index]].js

import { post } from "../../../../../queue.js";
import { createBullBoard } from "@bull-board/api";
import { BullAdapter } from "@bull-board/api/bullAdapter";
import { ExpressAdapter } from "@bull-board/express";
import express from "express";

const app = express();

const serverAdapter = new ExpressAdapter();

createBullBoard({
  queues: [new BullAdapter(post)],
  serverAdapter: serverAdapter,
});

serverAdapter.setBasePath("/api/auth/admin/queues");

app.use("/api/auth/admin/queues", serverAdapter.getRouter());

export default app;

[smoothdvd]

Is it possible to integrate with NextJS App Router?

[nocodehummel]

Above approach works, but requires Nextjs API route configuration in the Bullboard source file.

export const config = { api: { externalResolver: true, bodyParser: false } };