Describe the feature you'd like to request

It'd would be nice to use HTTP methods as a filename scheme when creating API endpoints and be called based on the request type made by the client

Currently

Lets say we have two endpoints created, each will be handling GET and POST requests.

The file directory would look like so

.
└── src
    └── pages
        └── api
            ├── bar.ts
            └── foo.ts

The API endpoint URL would be:

• api/bar
• api/foo

Then that would mean bar.ts and foo.ts will have code handling GET and POST request in those files.

foo.ts

const handleGet = () => {}

const handlePost = () => {}

const requestHandler = (req: NextApiRequest, res: NextApiResponse) => {
  const { method = '' } = req;

  // limit which HTTP methods are allowed
  switch (method) {
    case 'GET': {
      handleGet()
      break;
    }
    case 'POST': {
      handlePost()
      break;
    }
    default: {
      res.setHeader('Allow', ['GET', 'POST']);
      res.status(405).end(`Method ${method} Not Allowed`);
    }
  }
};

bar.ts

const handleGet = () => {}

const handlePost = () => {}

const requestHandler = (req: NextApiRequest, res: NextApiResponse) => {
  const { method = '' } = req;

  // limit which HTTP methods are allowed
  switch (method) {
    case 'GET': {
      handleGet()
      break;
    }
    case 'POST': {
      handlePost()
      break;
    }
    default: {
      res.setHeader('Allow', ['GET', 'POST']);
      res.status(405).end(`Method ${method} Not Allowed`);
    }
  }
};

There's seem to be redundant code to handle different HTTP method types.

So instead, it would be better to have API endpoint file changed to a folder and the files in that folder contain HTTP method as files that API will call depending on the request type made by the client.

Describe the solution you'd like

What I'm proposing is to split them based on HTTP methods

.
└── src
    └── pages
        └── api
            ├── bar
            │   ├── GET.ts
            │   └── POST.ts
            ├── foo
            │   ├── GET.ts
            │   └── POST.ts
            └── foobar
                └── baz
                    ├── GET.ts
                    └── POST.ts

The API endpoint URL would be:

• api/bar
• api/foo
• api/foobar/baz

sending request would be the same as before.

But now code that handle GET and POST requests are separated

Check for more: https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

foo/GET.ts

const handleRequest = () => {}

foo/POST.ts

const handleRequest = () => {}

bar/GET.ts

const handleRequest = () => {}

bar/POST.ts

const handleRequest = () => {}

foobar/baz/GET.ts

const handleRequest = () => {}

foobar/baz/POST.ts

const handleRequest = () => {}

pros

• simplifies the code that handle HTTP methods
• smaller code per file

cons

• more files to deal with
• might be complicated to code behind the scenes

Describe alternatives you've considered

An alternative is for exporting certain functions that handle HTTP requests based on the HTTP method types

Ex:
api/foo endpoint

export const handleGet = () => {}

export const handlePost = () => {}

export const handleDelete = () => {}

export const handlePatch = () => {}

Check for more: https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

NextJS looks for certain named functions that will be called depending on the HTTP method used.

Ex: if GET request is made, then function handleGet is called automatically
Ex: if POST request is made, then function handlePost is called automatically

If a HTTP method is used and there's no corresponding function to handle it will return an automatic error code 405