App/Route issue "Promise<unknown>"

[albertpeiro]

This does not work as documented (in Typescript)

const handler = (): Response => {
  console.log("Hello world!");
  const data = { hello: "world" };
  return Response.json({ data });
};

const api = Api();
api.post(handler);

export async function POST(request: NextRequest, ctx: ApiRequestContext) {
  return api.run(request, ctx);
}

When I run production npm run build I get:

Type error: Route "src/app/api/waitlist/route.ts" has an invalid export:
  "Promise<unknown>" is not a valid POST return type:
    Expected "void | Response | Promise<void | Response>", got "Promise<unknown>".
      Expected "Promise<void | Response>", got "Promise<unknown>".
        Expected "void | Response", got "unknown".

to fix you'll have to as Promise<any>

export async function POST(request: NextRequest, ctx: ApiRequestContext) {
   return api.run(request, ctx) as Promise<any>;
}

▲ Next.js 14.0.4

[Siddharth2212]

I am facing same issue after update to next 14

[OgDev-01]

export async function POST(request: NextRequest, ctx: ApiRequestContext) { return api.run(request, ctx) as Promise; }

Have you considered Promise<NextResponse>. Using any ulters the main purpose of typescript 🤌

[OgDev-01]

I am facing same issue after update to next 14

This fixed the error for me... Thanks @albertpeiro for this opening this isuse 👍 .

const router = createEdgeRouter<NextRequest, NextResponse>();

router
  .use((req, res, next) => AuthGuard(req, next))
  .post((req, res, next) => {
    return createProject(req, res);
  });

export async function POST(req: NextRequest, res: NextResponse) {
  return router.run(req, res) as Promise<NextResponse>;
}

I'll open a PR that updates the Readme for new users to save them from days of debugging 😃

[ravidyoeun]

I am also facing the same issue after upgrading to next 14. Thank you @albertpeiro for showing how to resolve this issue.

[chenweigh]

Problem

⨯ Error: No response is returned from route handler '/next-app-demo/app/api/test/route.ts'. Ensure you return a Response or a NextResponse in all branches of your handler.

Code

import { NextResponse, type NextFetchEvent, type NextRequest } from "next/server";
import { createEdgeRouter } from "next-connect";
// import cors from "cors";

interface RequestContext {
  params: {
    id: string;
  };
}

const router = createEdgeRouter<NextRequest, RequestContext>();

router
  // A middleware example
  .use(async (req, event, next) => {
    const start = Date.now();
    await next(); // call next in chain
    const end = Date.now();
    console.log(`Request took ${end - start}ms`);
  })
  .get((req) => {
    return NextResponse.json({ data: '111', type: 'get' }, { status: 400 });
  })
  .put((req) => {
    return NextResponse.json({ data: '111', type: 'put' }, { status: 400 });
  });

export async function GET(request: NextRequest, ctx: RequestContext){
  return router.run(request, ctx) as Promise<NextResponse>;
}

export async function PUT(request: NextRequest, ctx: RequestContext) {
  return router.run(request, ctx) as Promise<NextResponse>;
}

curl http://localhost:3002/api/test