4

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!

luanmessias
  • 96
  • 1
  • 6
  • 1
    [API routes](https://nextjs.org/docs/api-routes/introduction) should go inside `/pages/api` folder. The `api` folder must be inside the `pages` folder. – juliomalves Mar 15 '21 at 22:46
  • Thanks Julio for the answer, you're right but my problem is in production that the project answer 404 when I use the folder on /pages/api. – luanmessias Mar 15 '21 at 23:06
  • That doesn't sound right. Can you show the exact error you're getting? Is the URL for the request that's failing correct? – juliomalves Mar 15 '21 at 23:07
  • Exactly, all my endpoints on production returns GET error 404 (not found), something that I tried is just move the api folder to project root and it works on production but for me don't seems right, I think both (localhost and production) should work with the api folder on the right place `/pages/api/`. – luanmessias Mar 15 '21 at 23:29
  • Can you show an example from your code where you're making a request to the API route? – juliomalves Mar 15 '21 at 23:34
  • Of course, I put the method that I'm using above. I tried some different methods too.. without axios using only fetch, without SWR too but the result is always the same, work on localhost and not on production... Something that I guess is maybe the incompatibility of vercel server with the ./src/ structure folder but I'm not sure. – luanmessias Mar 15 '21 at 23:50
  • same issue, if I place the /api folder in root I get an error – Speedy11 May 14 '21 at 14:10

2 Answers2

5

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.

Kelvin
  • 629
  • 7
  • 8
1

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.

Abhishek Kumar
  • 11
  • 2