Deploy Strapi and NextJS to Heroku and Vercel

In this video, you'll deploy the Strapi Ecommerce to Heroku and the NextJS Ecommerce to Vercel.

The Complete Strapi Course:

Take your FullStack Javascript skills and career to the next level:

Access to the Source Code
Code it with me on Youtube:
Or From Github

Accounts you'll need:
A Github Account
A Heroku Account
An AWS Account (although you could use something else for file upload)
You can signup to Vercel for free with your Github Account

If you enjoyed this video then check out The Complete Strapi Course:

Timestamps:
00:00 Prepare Strapi for Deployment
11:06 Deploy Strapi to Heroku
19:31 Set up the Strapi Admin Panel
22:52 Deploy NextJS to Vercel
28:29 Test the Deployment

* Disclaimer *
In the past I've been paid to produce content by the following companies:
Magic

Chill Night by Amine Maxwell & MICHAL
Creative Commons — Attribution 3.0 Unported — CC BY 3.0

Deploy demo repos:

[Jennifer-jude]

This is exactly why I stick and will stick to forestry headless cms.

Strapi is great on localhost but the setup for live deployment is stupendously over the top.... They should take a really good look on how easy forestry does it.

[audijosue]

Many thanks for this gift for Christmas Bro

[marcoferretti]

That's really great content! I have a few questions for you. Why did you deploy backend and frontend on both Heroku and Vercel? Could you have used just one of the two platforms? Or does one platform have some better use case scenarios than the other one?

[vibrantabhishek]

Is it necessary to deploy both strapi and next separately?

[mrsingleb]

The deployment was successful but my app can't be seen. Igot this error message : "An error occurred in the application and your page could not be served.". What should i do?

[chloesun]

Thanks for this tutorial, and I'm following this step by step! I have no errors in the dev mode for nextjs forntend, but deployment to vercel kept failing at the step of generating static pages, with error like "Unhandled error during request: TypeError: Cannot read property 'value' of undefined".. wonder why...

[md.jahidhossainmridha]

Thanks, Alex the Entreprenerd, I have a question. Is the process same for Strapi v.4???

[dejangavrilovik]

Hey Alex, Thank you for this great guide!
I tried to deploy a new Strapi 3.4.1 version with this configuration (AWS bucket and PG), however when I deploy on Heroku - build is successful, but when I open the URL -> it says: Application Error, and does not give any useful info. In chrome dev tools the only network request is 503 error. P.S. on Local dev it works fine. I tried deploying with the version 3.5.0-next as well and still builds successfully, but throws application error heroku screen.

[renatomignogna]

Hey Alex, thanks for this. I followed all the steps and got my Strapi API deployed on Heroku successfully :) I did however have some trouble with building production Next js, so I am not managing to deploy to vercel. Looks like I get some sort of error with the URL itsefl, any ideas what I might be able to do about this ? I added all ht env variables including the heroku enpoint, but I get "TypeError: Failed to parse URL from undefined/movies" " input: 'undefined/movies',
code: 'ERR_INVALID_URL'"

[kamalchoudhary]

Hi, I am using Cloudinary instead of AWS. If I upload an image to Strapi, it gets uploaded to Cloudinary correctly. But I receive only that image in Strapi Media Library. I mean I don't get its other versions inside Strapi i.e. thumbnail, small, medium, etc... However, I can see that those images are generated on Cloudinary. Anyone knows how to automatically retrieve those images in the Strapi?

[FrancescoCicGramegna]

Hi, thx for the tutorial!
When i try to deploy the backend on Heroku i got:
Application error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command


if i remove the connection with postgres in database.js it works! do u know what could be ?

[johanab]

Does Heroku create an API you can fetch things from?

[KerimWillem]

Really like your videos! Can't imagine how much time I would be spending figuring this all out by myself. I'm getting an error 500 when trying to upload an image though, and I don't know what to do about it. In the log it says: debug POST /upload (654 ms) 500, at=info method=POST path="/upload" host=(name site) request_id=(name request id) dyno=web.1 connect=0ms service=658ms status=500 bytes=460 protocol=https. Do you know what to do about this?

The weird thing is that I am able to publish 'products' without an image.

[KerimWillem]

Whenever I push the Strapi backend to github, Heroku deletes the Postgres database. Can you tell me how to prevent this?

[code.design]

I wonder why strapi needs heroku, and next vercel. I would honestly prefer a simple no brain solution that uploads to vercel or netlify and just works.
I love strapi (for its usage and flexible price plans) however... it truly is a pain to deploy to production. Localhost is a breeze!

[ArthurDamato]

Hello, I am new to next.js and love this tutorial. I'm deploying a project to heroku and the build error it throws me is that it can't find an /app/server.js. Does next.js require a server.js document and procfile like express apps do?

[jesussalasgil]

Why when i try to deploy it says that only absolute urls are supported ?

[rasheediskilu]

Please I need your help sir. I have been following your tutorial on how to deploy strapi admin panel to heroku but it gives me this error as follows: Application error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
heroku logs --tail

[ThomazMartinez]

Fells like this is more complicated than it should, why you need Heroku for this? Just use Vercel and configure SSR or API of it to connect to Strapi?

[meceka]

Bro share your social accounts. I wanna follow you.