NextJS Usage

[hecksadecimal]

I'm trying to use better-see in a NextJS API Route, but I'm having trouble understanding how to go about it, and what precisely better-see expects in order to function correctly. The README claims compatibility with NextJS, but I'm having trouble finding any documentation or examples that support this.

I'm using NextJS 15.1.0 on node 20.18.1.

Here is some example code.

import { createSession } from "better-sse"
import { MessageSchema } from "@/app/_components/shared/Message";
import { NextApiRequest, NextApiResponse } from "next";

export const dynamic = "force-dynamic";

export async function GET(req: NextApiRequest, res: NextApiResponse) {
    const session = await createSession(req, res)

    while (true) {
        await new Promise(resolve => setTimeout(resolve, 1000))
        const message: MessageSchema = {
            id: Math.random(),
            content: "Hello, world!",
            user: {
                id: Math.random(),
                name: "User",
                color: "#000000",
                character: {
                    acronym: "??", 
                    name: "SYSTEM",
                    color: "#000000",
                    quote: "Just an ordinary system message.",
                    quirk: {
                        case: "normal",
                        prefix: "",
                        suffix: "",
                        replacements: []
                    }
                }
            }
        }
        session.push(message)
    }
}

Which results in the following server error when a client attempts to listen on this route.

GET /api/chat/test/stream 500 in 363ms
TypeError: this.req.once is not a function
    at new Promise (<anonymous>)
    at GET (src/app/api/chat/[chatUrl]/stream/route.ts:8:40)
      export const dynamic = "force-dynamic";
      export async function GET(req: NextApiRequest, res: NextApiResponse) {
        const session = await createSession(req, res)

[MatthewWid]

Hi there. Next.js is supported but unfortunately only when using API routes under the Pages Router as this library expects the Node IncomingMessage and ServerResponse objects.

You can use it like the following:

// pages/api/sse.ts

import { createSession } from "better-sse";
import type { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
        req: NextApiRequest,
        res: NextApiResponse
) {
        const session = await createSession(req, res);

        session.push("Hello, world!");
}

Route Handlers under the App Router instead give you the Request and Response objects from the Fetch API which won't be compatible, though support for this is planned in #79.

I'm having trouble finding any documentation or examples that support this.

I'll add a usage snippet to the recipes section of the documentation with a note about compatibility.

[hecksadecimal]

Thanks for the elaboration. Currently I use the App router, and this configuration is pushed as the default for new nextjs projects. I wasn't at all aware that there was an incompatibility.

Generally I'm opposed to mixing usage of the Pages router with the App router, but if it's my only way forward until #79 is resolved then I guess I have little choice. I can't think of another workaround right now that would let me continue to exclusively use the App router.