Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[🐛 Bug]: Type "NextApiRequest" is not a valid type for the function's first argument. #565

Closed
1 task
Mecanik opened this issue Nov 28, 2023 · 5 comments
Closed
1 task
Labels
bug Something isn't working

Comments

@Mecanik
Copy link

Mecanik commented Nov 28, 2023

next-on-pages environment related information

System:
        Platform: linux
        Arch: x64
        Version: #1 SMP Thu Oct 5 21:02:42 UTC 2023
        CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
        Memory: 16 GB
        Shell: /bin/bash
Package Manager Used: npm (10.2.3)

Relevant Packages:
        @cloudflare/next-on-pages: 1.7.4
        vercel: 32.3.0
        next: 14.0.3

Description

Attempting to use the NextJS Api Routes handler as per their docs:

export async function GET(
  req: NextApiRequest, 
  res: NextApiResponse<ResponseData>
) {
  // Include any logic or asynchronous operations here

  return res.status(200).json({ result: 'John Doe', success: true, errors: [] });
}

Will fail to build with the following:

06:16:21.515 | ▲  Type "NextApiRequest" is not a valid type for the function's first argument.
06:16:21.515 | ▲    Expected "NextRequest \| Request", got "NextApiRequest".

This makes me believe that these types are not (yet) supported on CF Pages.

Please confirm, or please advise how to do this.

Reproduction

Try to create API Routes as per the documentation: https://nextjs.org/docs/pages/building-your-application/routing/api-routes

Pages Deployment Method

Pages CI (GitHub/GitLab integration)

Pages Deployment ID

f1f87320-335f-422a-ac67-7e81fd494a95

Additional Information

I have struggled for quite a while to test different scenarios using NextApiRequest and NextApiResponse, all my attempts failed. It would be beneficial to list the unsupported functions if possible to avoid developers having to test out each scenario.

Would you like to help?

  • Would you like to help fixing this bug?
@Mecanik Mecanik added the bug Something isn't working label Nov 28, 2023
@Mecanik
Copy link
Author

Mecanik commented Nov 28, 2023

To add, I have also tried:

import type { NextApiHandler } from "next"

export const runtime = 'edge'

export default async function handler(...args: Parameters<NextApiHandler>) 
{
	// Include any logic or asynchronous operations here
	console.log(args);
	
	const res = args[1];
	
	return res.status(200).json({ result: 'John Doe', success: true, errors: [] });
}

Same result:

06:33:56.557 | ▲  Type error: Route "src/app/api/......./route.ts" does not match the required types of a Next.js Route.
06:33:56.557 | ▲  "handler" is not a valid Route export field.

@james-elicx
Copy link
Contributor

You're trying to use the old Node.js format instead of the Edge runtime format. Further, neither of those types are used in the app directory yet you wrote an example for a route handler.

https://nextjs.org/docs/pages/building-your-application/routing/api-routes#edge-api-routes
https://nextjs.org/docs/app/building-your-application/routing/route-handlers#examples

export const GET = (req: Request) => {
	// do stuff
	return new Response('hello world');
}

@Mecanik
Copy link
Author

Mecanik commented Nov 28, 2023

You're trying to use the old Node.js format instead of the Edge runtime format. Further, neither of those types are used in the app directory yet you wrote an example for a route handler.

https://nextjs.org/docs/pages/building-your-application/routing/api-routes#edge-api-routes https://nextjs.org/docs/app/building-your-application/routing/route-handlers#examples

export const GET = (req: Request) => {
	// do stuff
	return new Response('hello world');
}

Right, so it's not possible to use NextApiRequest or NextApiResponse as mentioned. Thanks.

@Mecanik Mecanik closed this as completed Nov 28, 2023
@hirenace
Copy link

hirenace commented Apr 17, 2024

Still getting this type of error in next 14 (App Router)

Type "NextApiRequest" is not a valid type for the function's first argument.
Expected "Request | NextRequest", got "NextApiRequest".

Here is my code please let me know what is wrong on below code

export const runtime = 'edge';
// To handle a POST request to /api
export async function POST(request: NextApiRequest): Promise<NextResponse> {
  const { username } = request.body;
  try {
    const response = await fetch(`${API_ENDPOINT}`), {
      method: 'POST',
      body: JSON.stringify({ username }),
    });
    const data = await response.json();
    // Return the user data
    return NextResponse.json({ success: true, data });
  } catch (error) {
    return NextResponse.json({ error });
  }
}

@devashish2024
Copy link

Still getting this type of error in next 14 (App Router)

Type "NextApiRequest" is not a valid type for the function's first argument. Expected "Request | NextRequest", got "NextApiRequest".

Here is my code please let me know what is wrong on below code

export const runtime = 'edge';
// To handle a POST request to /api
export async function POST(request: NextApiRequest): Promise<NextResponse> {
  const { username } = request.body;
  try {
    const response = await fetch(`${API_ENDPOINT}`), {
      method: 'POST',
      body: JSON.stringify({ username }),
    });
    const data = await response.json();
    // Return the user data
    return NextResponse.json({ success: true, data });
  } catch (error) {
    return NextResponse.json({ error });
  }
}

Change request: NextApiRequest to request: Request or any, worked to me, thanks @james-elicx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants