CODEWITHSUNDEEP
reactjsrestnext.jsserverlessvercel
luanmessias
luanmessias

Reputation: 116

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!

Upvotes: 5

Views: 8752

Answers (2)

Abhishek Kumar
Abhishek Kumar

Reputation: 11

I tried deploying my app on digital ocean and it worked cuz vercel was not providing a server. I was not able to call my api from POSTMAN as well. Deployed it on digitalOcean and then it ran a server just like my localhost.

Upvotes: 1

Kelvin
Kelvin

Reputation: 689

Not 100% sure if this is the same issue. I had this warning in my build phase:

warn  - Statically exporting a Next.js application via `next export` disables API routes. This command is meant for static-only hosts, and is not necessary to make your application static.

Make sure you are using the correct build command in out package.json scripts.

I'm my case:

"next build && next export" needed to be changed to "build": "next build"

Note: I removed && next export

This disabled the static export feature and allowed the use of pages/api when running yarn start note: yarn start relies on the build script within Vercel's build pipeline. So do not override the default settings unless it is needed.

Also normal Node/JS projects you can define a source folder in the scripts area ie "start": "<SOME_COMMAND> ./src"....but Next.js does this automatically so I do not think having an src file is the issue. I too have an src file in my project and it is a very common way (preferred way) of organizing your JS project. You shouldn't have to touch this if you are using next.

Upvotes: 6

Related Questions