Next.js: Proxy to Rest API

[maestroh]

I have a couple of questions about how server side rendering would work my existing API. How can I run an API under the same port during development? For example, with create-react-app, I would use webpack's proxy configuration. Is there some similar configuration that I can use with next?

Also, in production, how would I run an API and still take advantage of the server side rendering from next?

I'm sure there are simple answers to these questions. I feel like I'm missing some fundamental concepts. Thanks for the help.

[sergiodxa]

There are discussions about how to allow the usage of custom webpack configurations (#40 and #222), that will allow you to use the webpack's proxy configuration.

Meanwhile you can run your API in another port or made use of NGINX as a reverse proxy to do that (I think the different port is the best for development right now because it doesn't require to configure a NGINX).

In production you can use NGINX as a reverse proxy, so the user made a HTTP request to the NGINX server and it will map the requests to the next.js servers (you can have multiple and load-balance them) or if the request are in /api or api.domain.com (for example) you can map them to your API servers.

[rauchg]

Great comment by @sergiodxa. We should probably start a wiki page on this as well.

tl;DR: We recommend talking from getInitialProps to something like api.yourdomain.com, or a proxied yourdomain.com/api

Keep server APIs separate. Keep your Next.js app small and scoped to the frontend code.