Internal API Call in the same NextJS App not working - 404 not found

Answered

Yacare Caiman posted this in #help-forum

Yacare CaimanOP

2023-11-02T11:45:58.000Z

Hello I followed this tutorial, to create an internal API EndPoint as server and make the API call in React with 'use client'. But it didn't worked for me: https://nextjs.org/learn-pages-router/basics/api-routes/creating-api-routes

I placed the 'hello.ts' file under 'src/pages/api' and then under 'src/app/pages/api' and make the call with axios like this:

const dataAxios = axios.get('../pages/api/hello') // calling the file in the folder 'src/app/pages/api'
    .then(
      res => console.log('dataAxios - res: ', res)
    ).catch(
      err => console.error('dataAxios - error: ', err)
    );

  useEffect(() => {
    console.log('Data images -- dataAxios -- from public static folder:', JSON.stringify(dataAxios));
  }, [dataAxios]);

And i got this error: GET http://localhost:3000/pages/api/get-images-from-public-folder 404 (Not Found)

dataAxios - error:  AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {â€¦}, request: XMLHttpRequest, â€¦}

Link in Github discussion: https://github.com/vercel/next.js/discussions/57924

Answered by @ts-ignore

- That's not how you call an internal api
- the pages is just a folder to put your source code and doesn't reflect int he url so the url will be /api/get-images-from-public-folder

View full answer

8 Replies

@Yacare Caiman Hello I followed this tutorial, to create an internal API EndPoint as server and make the API call in React with 'use client'. But it didn't worked for me: https://nextjs.org/learn-pages-router/basics/api-routes/creating-api-routes I placed the 'hello.ts' file under 'src/pages/api' and then under 'src/app/pages/api' and make the call with axios like this: `const dataAxios = axios.get('../pages/api/hello') // calling the file in the folder 'src/app/pages/api' .then( res => console.log('dataAxios - res: ', res) ).catch( err => console.error('dataAxios - error: ', err) ); useEffect(() => { console.log('Data images -- dataAxios -- from public static folder:', JSON.stringify(dataAxios)); }, [dataAxios]);` And i got this error: `GET http://localhost:3000/pages/api/get-images-from-public-folder 404 (Not Found)` `dataAxios - error: AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {â€¦}, request: XMLHttpRequest, â€¦}` Link in Github discussion: https://github.com/vercel/next.js/discussions/57924

@ts-ignore

2023-11-02T11:48:12.000Z

- That's not how you call an internal api
- the pages is just a folder to put your source code and doesn't reflect int he url so the url will be /api/get-images-from-public-folder

Answer

@ts-ignore

2023-11-02T11:48:37.000Z

- 'use client' doesn't work in pages router

Cape horse mackerel

2023-11-02T11:51:02.000Z

And use app router instead ðŸ™‚

@@ts-ignore - That's not how you call an internal api - the `pages` is just a folder to put your source code and doesn't reflect int he url so the url will be `/api/get-images-from-public-folder`

Yacare CaimanOP

2023-11-02T13:36:40.000Z

Thank youuuu... it worked right now like a charm.

@@ts-ignore - `'use client'` doesn't work in pages router