Context

I’m using NextJS v11.1.1-canary.11, React v17.0.2 and Typescript v4.3.5.

I wanted to create a simple API endpoint, based on NextJS Typescript documentation, so I’ve created a file in pages/proxy folder named login.tsx that is containing very simple API code:

import type { NextApiRequest, NextApiResponse } from 'next'

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

My problem

When I try to call that API endpoint, an error occurs :

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

Full stacktrace here

I’ve done researches and I can’t find any case like me on Google or Stackoverflow, I’m new in NextJS so I’m probably misunderstanding something. Does someone have an idea of what I’m doing wrong ?

>Solution :

Your example works fine.

You can solve this issue by placing your login.ts file at pages/api/{whatever_you_want}

Next docs:

Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page. They are server-side only bundles and won’t increase your client-side bundle size.