nextjs: how can I do a fetch on a local path?

Question

I would like to use the fetch method on a relative path such as :

export async function getServerSideProps() {
    // Fetch data from local API
    const res = await fetch(`/api/get_all_prices`)
    const data = await res.json()
    // Pass data to the page via props
    return { props: { data } }
}

function HomePage({props}) {
    return (
        // use props here
    )
}

The reason is as follows : I am testing my code on multiple different computers, sometimes with a different port

I would like this code to work in a dev and in a prod environment in order to have to remember to change the used urls on a per-computer / server basis ( witch introduces a lot of unwanted potential issues )

How can I get the data from my local api route ?

I could not figure out why does the fetch method not do local routes nor a workaround.

[EDIT]

The solution turned out to be a lib called superjson.

I was attempting to put my code into the API because I could not use getServerSideProps properly with prisma ( it returns Date objects that cannot be serialized in JSON )

Thus I was trying to use the API paths as the response there is properly serialized but ran into the issues that made me write this question

The complete solution is to write the method in a common file ( this allows for the factorisation ), use the lib superjson to properly serialize the object and call that method in the getServerSideProps method

This allows for clean code that is nextjs compatible

Does this answer your question? [Internal API fetch with getServerSideProps? (Next.js)](https://stackoverflow.com/questions/65752932/internal-api-fetch-with-getserversideprops-next-js) — juliomalves, Dec 28 '21 at 19:20
yes and no. I did attempt to do so but could no because Prisma was not serialising dates properly. This in turn meant that I could not use the `getServerSideProps` method. I was attempting to use the API route as I did notice that it was correctly serialised in there. Turns out it was not the best solution ( it also opens up an API route I would have preferred not to ). Solution turned out to be a lib called superjson that forces serialisation of the dates and allows the usage of `getServerSideProps`. — Matthieu Raynaud de Fitte, Dec 29 '21 at 18:50
You may want to add the solution that worked for you as an answer to your own question. — juliomalves, Dec 29 '21 at 19:01

amo · Accepted Answer · 2021-12-28T10:11:43.073

5

You can do it like this fetch('http://localhost:3000/api/get_all_prices') or replace the base URL with a variable fetch(baseUrl + 'api/get_all_prices') which might cause error: Only absolute paths are supported. However, you should only call local API for testing because...

You should not use fetch() to call an API route in getServerSideProps

this is mentioned in the documentation

It is recommended to write your logic directly inside getServerSideProps. This applies to getStaticProps too.

edited Dec 28 '21 at 10:11

answered Dec 28 '21 at 10:00

amo

123
3

How do I get the baseUrl out of NextJs? – Petrus Theron Aug 30 '23 at 09:42

score 2 · Answer 2 · answered Dec 28 '21 at 09:08

Only absolute paths are supported - this type of error you will have in prod

You need to set up your environment variables.

Your path must be something like:

const res = await fetch(process.env.APIpath + `/api/get_all_prices`)

Also, don't forget to set up variables on Vercel

score -1 · Answer 3 · answered Dec 28 '21 at 07:54

When you use default next.js API there is no need to be concerned about port, domain, or other things next.js will recognize automatically. if it works correctly on development mode there will be no error on production even if domain or port changes.

and also next.js build-in route is good if you want to mask actual URL or pure node implementation, for example, you have a route api/posts but in posts, you send request to another API like https://backend if you see your network console it shows request send to api.

nextjs: how can I do a fetch on a local path?

3 Answers3