How to avoid fetching from localhost

[liulanz]

My teammates and I are currently working on creating an example using Next.js with MongoDB. We basically finish it. It's running successfully on localhost. However, 500 Internal Server Error shows up when I try to deploy it on Zeit.

It has to do with fetching data from localhost. Since we are new to all of these things, we are not sure on how to fix it. Can someone please take a look at our example?

One possible solution is to put the db connection into getStaticProps directly and get the data from there directly. We are confused on how to do that. HELP WANTED.

Thank you.

@MichelleLucero @sdhani @chislee0708

[rafaelalmeidatk]

The issue is in this line, it is making a request directly to localhost:3000, this isn't the port the app will be listening in production.

Instead of making a request in getInitialProps for the /api/pets endpoint, you can:

1. export this function that the endpoint is using in a way to make it shareable
2. use this new function in the endpoint, but you can now use it in getServerSideProps (or getStaticProps) too, removing the need for a API call

[liulanz]

Thank you so much for pointing it out and giving us suggestions. We will try to fix it now. Thanks a lot.

[rafaelalmeidatk]

Np! Here is another answer about the same thing with some code: #11210 (comment)