How to use Nodejs backend for your Next.js project (or both).

I can't find any reason to not use Next.js for my react project, I think I don't have to explain the benefits of it rather here is why I like Next.js over other frameworks.

1. Well-written documentation.
2. Awsome development experience.
3. file system routing.
4. Production-ready from the beginning.

But for handling the backend Next.js automatically converts the “pages/api” routes into isolated functions while deployment. This infrastructure is called function as a service. Although this avoids the complexity of maintaining a separate server sometimes we may require Nodejs to handle the backend.

In my case, Firstly I tried the Next.js built-in server to handle my back end which involved a lot of MongoDB interactions. It worked okay but ran into problems very often and I had a hard time finding the documentation for it. So due to time constraints, I choose to trash the idea of the Next.js backend and used Nodejs instead. So in my research, I found a lot of methods to use the custom back end with Next.js. I think this is the best option if you want to quickly set up the project.

The only file we have to care about in this scenario is the next.config.js. The method we are making use of is the next.js rewrites. Rewrites can act as a proxy between the front end and the back end. To use rewrites just open up the next.config.js and add the rewrites function.

module.exports = {
  async rewrites() {
    return [
      {
        source: <api endpoint in used in the front end>,
        destination: <nodejs handler endpoint>,
      },
    ]
  },
}

So the concept is simple when using the Next.js built-in server we put all our backend handlers in the pages/api/ directory. When using rewrites the request first hits the next.config.js file which first looks in the api/ directory for the requested endpoint if it is found then the request is routed to that endpoint. If the source destination is not inside the api/ directory then the request is routed to the destination endpoint, which can be an isolated backend server or a different endpoint in the Next.js built-in server. Since the rewrites function returns an array of rewrite objects, we can define as many rewrites as possible.

Advantages

1. Since rewrites act as a URL proxy we can set cookies directly from the server without further configuration.
2. The flexibility to use different backend architectures at the same time.
3. Better isolation of front end and backend, which is easy to maintain.
4. Better distribution of the server resources.
5. We can forget about the CORS.

Disadvantages

1. For a large application with plenty of API endpoints, the next.config.js file becomes lengthy and needs to manually rewrite all the endpoints.
2. If the external server takes more time to send back the response the connection gets closed and will throw an internal server error. I think we need to configure the waiting time for such cases or avoid heavy payloads.

So I couldn't find any other disadvantages of using this method yet. More details regarding the rewrites can be found in the Next.js documentation. If anyone feels like I am missing something leave a comment, and please share your thoughts.