Error encountered in NextJS API: "TypeError: res.status is not a function"

Question

Error encountered in NextJS API: "TypeError: res.status is not a function"

Background

In my development environment, I am using NextJS v11.1.1-canary.11, React v17.0.2, and Typescript v4.3.5.

To set up a basic API endpoint following the guidelines from NextJS Typescript documentation, I created a file named login.tsx in the pages/proxy folder with a simple API code snippet:

import type { NextApiRequest, NextApiResponse } from 'next'

export default function Login(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ name: 'John Doe' })
}

The Issue

Upon calling the API endpoint, an error is triggered :

TypeError: res.status is not a function
    at Login (C:\wamp64\www\project-front\.next\server\pages\proxy\login.js:19:7)

You can find the full stacktrace here.

Despite researching extensively, I have been unable to locate any similar cases on Google or Stackoverflow. As a newcomer to NextJS, it's possible that I am overlooking something. Is there anyone who might have insights into what I may be doing incorrectly?

typescript next.js typeerror

Answer 1

Answer №1

Your demonstration is effective.

To resolve this issue, simply move your login.ts file to the directory pages/api/{whatever_you_want}

Please refer to the following documentation:

Any file located within the pages/api folder will be treated as an API endpoint (mapped to /api/*) and will not impact your client-side bundle size since they are server-side only bundles.

Answer 2

Your demonstration is effective.

To resolve this issue, simply move your login.ts file to the directory pages/api/{whatever_you_want}

Please refer to the following documentation:

Any file located within the pages/api folder will be treated as an API endpoint (mapped to /api/*) and will not impact your client-side bundle size since they are server-side only bundles.

Answer 3

Answer №2

My experience was quite similar - the issue stemmed from my configuration of the runtime to use "experimental-edge".

If you simply remove or comment out that line, it should resolve the problem. It seems like a bug in the canary version.

// Check next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    transpilePackages: ["ui"],
    // runtime: "experimental-edge",
  },
};

Answer 4

My experience was quite similar - the issue stemmed from my configuration of the runtime to use "experimental-edge".

If you simply remove or comment out that line, it should resolve the problem. It seems like a bug in the canary version.

// Check next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    transpilePackages: ["ui"],
    // runtime: "experimental-edge",
  },
};

Answer 5

Answer №3

If you are utilizing App Router and need to send back JSON data, take a look at the updated code snippet from Matei:

"use server";

import { NextRequest, NextResponse } from "next/server";

async function GET(req: NextRequest) {
  return NextResponse.json(
    { key: "value" },
    {
      status: 200,
    }
  );
}

export { GET };

Answer 6

If you are utilizing App Router and need to send back JSON data, take a look at the updated code snippet from Matei:

"use server";

import { NextRequest, NextResponse } from "next/server";

async function GET(req: NextRequest) {
  return NextResponse.json(
    { key: "value" },
    {
      status: 200,
    }
  );
}

export { GET };

Answer 7

Answer №4

In the case of employing the App Router, the expected response should be:

"use server";

import { NextRequest } from "next/server";

async function GET(req: NextRequest) {

    return new Response("Hello", {
        status: 200
    })
}

export { GET }

Answer 8

In the case of employing the App Router, the expected response should be:

"use server";

import { NextRequest } from "next/server";

async function GET(req: NextRequest) {

    return new Response("Hello", {
        status: 200
    })
}

export { GET }

Answer 9

Answer №5

Make sure to always check the order of your input parameters as (req, res):

// Incorrect ❌
// This will result in a `TypeError: res.status is not a function` error
export default function Login(res, req) {
   ...
   res.status(200).json({ success: "ok" })
}

// Correct ✅
export default function Login(req, res) {
   ...
   res.status(200).json({ success: "ok" })
}

Answer 10

Make sure to always check the order of your input parameters as (req, res):

// Incorrect ❌
// This will result in a `TypeError: res.status is not a function` error
export default function Login(res, req) {
   ...
   res.status(200).json({ success: "ok" })
}

// Correct ✅
export default function Login(req, res) {
   ...
   res.status(200).json({ success: "ok" })
}

Error encountered in NextJS API: "TypeError: res.status is not a function"

Background

The Issue

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How can Node / Javascript import various modules depending on the intended platform?

Having trouble importing the hash-set module in TypeScript/SystemJS?

In the world of GramJS, Connection is designed to be a class, not just another instance

The wrong parameter is used to infer the generic function type argument in TypeScript

Unusual Behavior of *ngIf and jQuery in Angular 5: A curious case

React TypeScript with ForwardRef feature is causing an error: Property 'ref' is not found in type 'IntrinsicAttributes'

WebStorm is having difficulty identifying the Next.js project

Exploring the power of SCSS modules within Next.js

When the webpage first loads, the CSS appears to be broken, but it is quickly fixed when

Unsure about module loading with system.js and navigating Typescript

Tips for showcasing the information from a JSON document in React

Utilizing string literals as index signatures

What is the purpose of running tsc --build without any project references?

"In Typescript, receiving the error message "Attempting to call an expression that is not callable" can be resolved

Issue encountered with the signature provided for a Safe API POST request

Is it possible to utilize hooks such as 'useState' within an async/await server component?

"Customizing the template of the Angular Material 2 datepicker: A step-by-step

Retrieving information from the Dog API using axios and storing the results in a fresh array

Finding it challenging to adapt an AngularJs component-based modal to TypeScript

Issue with Angular 2 Routing: Unable to find a matching route