Queuedash does not work with lastest Next.js 15 (App Router)

[kaelianbaudelet]

Description

Hello 👋

I’m currently trying to integrate queuedash with Next.js 15.3 App Router, but I’m facing several issues that make it impossible to use in a modern setup.

Existing example in the repository still based on Next.js 13 Pages Router. Unfortunately, it no longer work with the current App Router conventions introduced since Next.js 14+.

I really love the idea of having a dashboard directly integrated into a Next.js app to manage BullMQ queues, and I hope one day this can officially support the latest Next.js versions 🙏

My Setup

• Queue system: BullMQ
• Runtime: Bun (Node.js environment)
• Next Routing: App Routing
• Bundler: Tried with both Turbopack (Next 14+) and Webpack

System:
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0
  Memory: 24 GB
  CPU cores: 14
Binaries:
  Bun: 1.2.21
  Node: 22.14.0
  npm: 11.5.2
  Yarn: 1.22.22
  pnpm: 10.10.0
Relevant Packages:
  next: 15.5.3
  react: 19.1.1
  react-dom: 19.1.1
  typescript: 5.9.2

How to reproduce

App routing structure:

app/
  queuedash/
    [[...slug]]/
      page.tsx
  api/
    queuedash/
      [trpc]/
        route.ts
page.tsx

//queuedash/[[...slug]]/page.tsx

"use client";

import { QueueDashApp } from "@queuedash/ui";

function getBaseUrl() {
  return `http://localhost:${process.env.PORT ?? 3000}/api/queuedash`;
}

export default function QueueDashPages() {
  return <QueueDashApp apiUrl={getBaseUrl()} basename="/queuedash" />;
}

//api/queuedash/[trpc]/route.ts

import { appRouter } from "@queuedash/api";
import * as trpcNext from "@trpc/server/adapters/next";
import { Queue } from "bullmq";

const reportQueue = new Queue("Paint");

// ❌ App Router does not allow default export in route handlers
export default trpcNext.createNextApiHandler({
  router: appRouter,
  batching: { enabled: true },
  createContext: () => ({
    queues: [
      {
        queue: reportQueue,
        displayName: "Reports",
        type: "bull" as const,
      },
    ],
  }),
});

Source of the error

The error happens as soon as I try to access the /queuedash page. The page compiles, and the dashboard loads, but it does not render correctly — some components are missing or not displayed. This seems to be caused by the API route handler (/api/queuedash/[trpc]) being incompatible with the new Next.js 15 App Router conventions.

Error logs

 ○ Compiling /queuedash/[[...slug]] ...
 ✓ Compiled /queuedash/[[...slug]] in 2s (5852 modules)
 GET /queuedash 200 in 3427ms
 ○ Compiling /api/queuedash/[trpc] ...
 ⚠ ./node_modules/bullmq/dist/esm/classes/child-processor.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/bullmq/dist/esm/classes/child-processor.js
./node_modules/bullmq/dist/esm/classes/index.js
./node_modules/bullmq/dist/esm/index.js
./app/api/queuedash/[trpc]/route.ts

 ⨯ Detected default export in '/app/api/queuedash/[trpc]/route.ts'.
   Export a named export for each HTTP method instead.

 GET /api/queuedash/queue.list?batch=1&input=%7B%7D 405 in 1542ms
 …

What I expected

• The dashboard should render at /queuedash.
• API calls (/api/queuedash/queue.list) should return valid responses instead of 405.
• Integration should work in Next.js 15.3 with App Router (Route Handlers instead of default exports).

What actually happened

• ioredis and bullmq cause critical dependency warnings.
• Route handlers in App Router reject the default export pattern used in trpcNext.createNextApiHandler.
• API requests to /api/queuedash/* fail with 405.

Suggestion

• Update the examples and codebase to support Next.js 15+ App Router (using route.ts with named exports for each HTTP method).
• Provide official guidance on how to configure queuedash in modern Next.js project.
• Ideally, maintain compatibility with both legacy Pages Router and new App Router.

🙏 Thanks a lot for the great work! I really hope we can see queuedash (and BullMQ dashboards in general) compatible with the latest Next.js versions. This feature would be super valuable for devs integrating job queues in modern Next.js apps.

[MatanMaimon]

try this as the code of app/api/queuedash/[...trpc]/route.ts (note the folder name is [...trpc]):

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { appRouter } from "@queuedash/api";
import { Queue } from "bullmq";
import { queuesList } from "@Root/lib/queues/queuesList";

const redisUrl = process.env.REDIS_URL!;

export const dynamic = "force-dynamic";

function handler(req: Request) {
  return fetchRequestHandler({
    endpoint: "/api/bulldash",
    req,
    router: appRouter,
    onError({ error }: { error: any }) {
      if (error.code === "INTERNAL_SERVER_ERROR") {
        console.error("QueueDash tRPC error:", error);
      }
    },
    createContext: () => ({
      queues:
        // loop over `queuesList` to build this array
        Object.values(queuesList).map((queueInfo) => ({
          queue: new Queue(queueInfo.key, {
            connection: { url: redisUrl },
          }),
          displayName: queueInfo.displayName,
          type: "bullmq" as const,
        })),
    }),
  });
}

export { handler as GET, handler as POST };

[kaelianbaudelet]

I managed to get it working, but the dashboard layout is completely broken, most likely due to a CSS conflict, since I’m using Tailwind v4 while the project seems to rely on an older Tailwind version.

[alexbudure]

@kaelianbaudelet you could try importing the css directly with something like

<link
   rel="stylesheet"
   href="https://unpkg.com/@queuedash/[email protected]/dist/styles.css"
/>

i’ll probably update to tailwind v4 by eoy anyway