Deploying NextJS front end and Expresss back end to Heroku

Question

Here is my directory structure

• app
  • frontend
  • backend

I don't have a package.json file in the main directory but both the frontend and backend have package.json files.

The frontend is a fully functional NextJS app and the backend is an Express server handling api/data requests.

I have one repository for the entire app. My goal is to push this app in its current structure to Heroku, set up whatever environment variables I need, and have Heroku deal with the build details. I have yet to find any tutorials or any SO questions that target my instance specifically.

So far I just tried to push the whole repo but this is there error message I'm getting:

remote: Compressing source files... done.
remote: Building source:
remote:
remote:  !     No default language could be detected for this app.
remote:                         HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
remote:                         See https://devcenter.heroku.com/articles/buildpacks
remote:
remote:  !     Push failed

I'm assuming this is because there is no package.json file in the root directory to tell Heroku what to do. I don't have enough experience to know if this really is my problem or not. Unfortunately, I don't really know the direction I need to go here and I'm having a really hard time finding tutorials or any help when I search about this. I'm coming to understand the process and details a little more as I go along but I could definitely use a good explanation as to what I need to do, how I need to do it, and why I need to do it. I know I'm asking for a lot but anything helps. Thank you.

Answer 1

I would suggest restructuring the project so that it has a package.json in the root folder. A simple way to make it work is by letting the Express app serve the NextJS app.

I was having the same issue as you. I realized that deploying a NextJS app isn't as straight-forward as deploying a Create-React-App app. I ended up following the official recommendation of the NextJS team for deployment, which is to let Vercel serve it.

It was actually incredibly easy. I managed to deploy the NextJS app in a matter of minutes. Create a Vercel account, add a new app and deploy it.

The downside of this is that you will use Heroku for deploying your backend, and Vercel for deploying your frontend. But if you are using GitHub for example, Vercel will automatically re-deploy your NextJS app everytime you push to your main branch. So, in actuality you won't even have to do much in Vercel after deploying it the first time.

There are probably other ways and workarounds, but according to Vercel (who by the way are the creators of NextJS), deploying it with Vercel is the easiest way.