How to use the ReactJs & NextJs together?

Whenever we develop an app, we first design its architecture and then determine which technology would be best suited for the app.

As the users begin to use the app, the requirements grow, and we add new features and improve the functionality, and we may not be able to build all the features with the technology we chose to develop the app, or rather it's not the best tool for that particular problem.

This is the same thing that happened with the AI Planet community platform, When we start started building the app we built it in Django, but over time we realized that the development effort is more on building the templates and writing CSS, so we over the period we migrated to ReactJS, But one page which we haven’t migrated is the bootcamps.

The reason for that is SEO, bootcamps are one of the most visited pages on the DPhi platform, and we get a lot of sign-ups from there. Most of that traffic comes via Google. We were afraid that we would lose the traffic we were receiving from Google since react is a CSR (Client-Side Rendering) application.

Photo by Lautaro Andreani on Unsplash

At the same time, we wanted to utilize React’s component architecture and packages such as MUI in order to develop our apps in a faster and more efficient manner, and we found that NextJs was the best tool for the job.

But there were 2 problems with this -

1. How the authentication will work as we were developing the app with 2 different technologies?
2. How we will deploy?

As our frontend and backend used to run on the same port and if we want to use the NextJs we need to run that on a different port so when we researched we got to know that cookies are port agnostic.

[embed]Are HTTP cookies port-specific? Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share…stackoverflow.com

[embed]Sharing Cookie between different ports Your domain is the same in this case localhost, so there shouldn't be any problem. Another thing is: the port is part…stackoverflow.com

But still, we were having CORS errors, which we resolved using the django-cors-headers package as our backend is in Django.

But there is one piece of the puzzle that remained which was when we fetch the data from the frontend you need to pass credentials param with request otherwise the cors error will not be resolved.

fetch(${SERVER}, {

credentials: “include”,

});

which resolved the error and we are able to authenticate the users successfully🙂.

Now second thing was to deploy which will depend on how you currently deploy your app for us it was straightforward we deployed the NextJs using the pm2.

and if you deploy on the test website before deploying on production you need to use the NextJs environment variables and route the pages which we built in NextJs to the port where NextJs is running using Nginx proxy_pass.

[embed]Nginx: poxy_pass different locations to different ports Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share…stackoverflow.com

[embed]Nginx: Everything about proxy_pass With the advent of Microservices™, ingress routing and routing between services has been an ever-increasing demand. I…dev.to

Also in the end thanks to Sam Joel who worked with me on this project.