Nextjs api "pages/api" doesn't work on vercel server

Hello guys may you help me?

I'm trying to configure my fake API to create some personal projects but in my case, the method using the /pages/api folder only works for me in localhost when I deploy to the server on Vercel the project can't find my endpoints.

In my case I'm using the src/ folder method to develop my app and I don't know if this structure can cause problems with api folder.

One thing that I tried and worked is deploying to vercel using the api folder at the root of the application (out of /src folder) but the api stop working on localhost.

This structure works on localhost but doesn't work on server:

├───public/
├───src/
    ├───api/
    ├───pages/
    ...
next.config.js
package.json

This structure works on server but doesn't work on localhost:

├───api/
├───public/
├───src/
    ├───pages/
    ...
next.config.js
package.json

This is the method that I'm using to get data:

AXIOS API:

import axios from 'axios'

const api = axios.create({
  baseURL: '/api/'
})

export default api

SWR HOOK:

import api from 'src/services/api'
import useSWR from 'swr'

function SwrFetchHook<Data = any, Error = any>(url: string) {
  const { data, error } = useSWR<Data, Error>(url, async url => {
    const response = await api.get(url)
    return response.data
  })

  return { data, error }
}

export default SwrFetchHook

SWR callback:

const { data } = SwrFetchHook<INavItem[]>('categories')

I hope that I could explain, my question here is how is the best way to work with this feature because the /src folder is common to use with nextjs but I don't know if this is the real problem with the api folder.

Thanks!