I spent three days straight trying to properly deploy my NextJS apps into some subdomains I had set up early on to no avail. Found your video and managed to set it up properly in a flash! Thank you very much from the bottom of my heart, mate!
Hey Stavros, I'm happy to know I was able to help you through something that's usually scary for you! Let me know if you would like to see other videos about VMs, servers or Linux.
Thank you for this very cool and informative video! Easy to follow and no water. Everything works now) But for the next videos could you zoom in the terminal maybe 2x, it's kinda hard to read it after youtubes compression. Also keep it a little bit higher, so the input line is over the youtubes playback line.
Can you provide guidance on implementing CI/CD for a NEXT.JS app that has already been deployed? Specifically, I would like to know how to automatically update the deployed app with any changes made to the code on our GitHub repository. If possible, could you create a video tutorial on this topic? Many people would likely find it useful.
Very very useful, I saw other videos and none of them were as clear as this one. Thanks to this video I've been able to upload to production a project that retrieves data from mysql.
the old certbot way doesn't work for me (error after command "sudo certbot --nginx -d MY_DOMAIN"), so I followed the guide on certbot official website to make it work.
Hi, I really enjoyed the video, however your video only shows, running a nextjs project on ubuntu when you clone the source code files from git and run the project on the server. my project build files are getting dropped through the Azure Devops release agent as I do not intend to keep the source code files on the server. Please let me know how to deploy I am stuck, your method works when I get the source code files. this is for anyone in the comments too.
With Azure, I'm not sure since I haven't used it at all. With GitHub Actions, I know there's a way to connect to the server via SSH (essentially give GitHub access to the server), so it builds the source code and copies the build files only (similar to what happens with a Dockerfile). That would essentially be the workflow, a CI/CD pipeline, and then the provider would need to have access to the server via SSH.
Honestly I'm not 100% sure, but since this is a reverse proxy and it handles all paths but the static path, it should also route the requests that are "not found" to NextJS, since it has no prior knowledge of what routes exist, which would be the case when simply serving static files. I'll give it a try and get back to you here in the comments, thanks for watching!
Thank you for this video. very informative and helpful. in part 28:45 in this video, in a nginx sites-available file you set up an alias for the location /_next/static directive to point to the .next/static/ folder. I have seen some videos of other developers they do not include this directive. They would just have the location directive that has a proxy_pass to direct requests to NextJS process to handle them. I would like to know the added benefit of having the location /_next/static directive please. Is it just a matter of choice? Or are there added benefits using the location directive /_next/static ? Thank you very much again for this video.
Which app files do I need to upload to the server to make it work. Let me guess, you don't know because you always let a third party do the thinking for you?
Haha, no. Actually I did this video to teach you how to self-host and avoid using a third-party hosting platform. I go over which files need to be uploaded in the video.
great tutorial.. but next time please don't make the command line fullscreen, because the youtube control and title overlay the last command on the bottom.
You can use a .env file, they are ignored automatically by git if you generate a NextJS app with the create-next-app CLI. Just add the file to the root of your project, and make sure to prefix with NEXT_PUBLIC_ if you want your client (instead of only the server, like API routes and getServerSideProps) to have access to it.
I followed your process. It seem simple. But when I work with the next js, adding pages and images, then image link is broken. When on other mainpage and refresh the browser, page not shown and show page not found. What's my mistake? I found the solution online, but all is about suggestion, not sulotion. Thanks for your tutor.
Hey Cempaka, thank you for watching! I'd love to help you help! Are you seeing any errors on your browser console? Or you could maybe enable the NGINX logs, to see if there are any errors there. Let me know!
@@webdevfuel Thanks for your reply. Actually it solved right now. I just forget to refresh PM2 when I modified NextJs. Your tutor helps me a lot. Thank and keep on going on making awesome wideo. :)
Hey. I'm not planning on doing one with Apache. But I've been thinking about releasing a new one with Caddy, which I think is easier to deploy with. Thanks for watching! 👍
Did the project have the getServerSideProps function the first time you ran the yarn build command? You might want to try and run yarn build and pm2 restart if you added the function to the website after the first build. There's no caching setup in this tutorial, so the getServerSideProps should run properly.
Hey Ahad! You need to create a user, then add the user to the sudo group, so you can run commands as root with the sudo command. I go through these steps in the video at the 6:54 mark. Let me know which part you need help with, I'm happy to help!
Which files of Next.js project do you have to move to the server? I mean, I deploy my nextjs app in my local and give me the '.next' folder, so which files of this folder I have to deploy to the server?
You don't need to build on your local machine. You only need to move to the server the files that are tracked by git (in the video I used git pull to get the files from GitHub), and then run the build command inside the folder on the server.
You'd have to deploy the Node.js backend separately, then make API calls from the Next.js client to the Node.js server (with fetch or axios). I'm glad to know this was helpful to you! 👍
@@webdevfuel A few days ago, I experimented with it, and it worked perfectly. I suggest creating a video about it, as it will greatly assist many aspiring developers.
I spent three days straight trying to properly deploy my NextJS apps into some subdomains I had set up early on to no avail. Found your video and managed to set it up properly in a flash! Thank you very much from the bottom of my heart, mate!
Thanks, it makes me really happy to know that! Let me know if you want to see more content around NextJS.
Deployments on VMs always used to scare me a bit but your video helped me a bunch! Thank you for taking the time to make it, appreciate it :D
Hey Stavros, I'm happy to know I was able to help you through something that's usually scary for you! Let me know if you would like to see other videos about VMs, servers or Linux.
I want to thank you first and foremost. Great step by step guide! Everything is well explained.
Hey Rubeite, thank you so much, I'm happy this was helpful and clear to you!
spent 2 days on random forums.. here is everything well presented
Thank you, I'm happy to know showing how to set up everything from scratch was helpful to you!
Thank you for this very cool and informative video!
Easy to follow and no water. Everything works now)
But for the next videos could you zoom in the terminal maybe 2x, it's kinda hard to read it after youtubes compression.
Also keep it a little bit higher, so the input line is over the youtubes playback line.
Thank you, I'm happy you found this helpful and to the point! Sure thing, I'll keep that in mind for future videos!
Great tutorial and exactly what I needed! Your explanations makes it very easy to follow along. Thank you!
Thank you, I'm glad this was helpful!
Can you provide guidance on implementing CI/CD for a NEXT.JS app that has already been deployed? Specifically, I would like to know how to automatically update the deployed app with any changes made to the code on our GitHub repository. If possible, could you create a video tutorial on this topic? Many people would likely find it useful.
Yes I am in your situation did you find a solution
Very very useful, I saw other videos and none of them were as clear as this one. Thanks to this video I've been able to upload to production a project that retrieves data from mysql.
Dude you have no clue how much you have helped, thank u so much!
Thank you Mohamed, glad I could help!
Greate video man! I really appreciate it.
Thanks man! I'm glad you enjoyed and I appreciate your comment!
I rarely comment but this was amazing. Thanks for you sharing especially VPS setup.
Thank you Jawad, I'm happy the complete setup from scratch was helpful to you!
Thank u very much! Life saver! Good explanation, easy to follow
Thank you for your kind words, I'm really glad this was helpful to you! Let me know if there's other content you'd like to see around this topic.
Thank you for the tutorial. Really appreciate it!
Thank you so much, I'm glad it was helpful!
the old certbot way doesn't work for me (error after command "sudo certbot --nginx -d MY_DOMAIN"), so I followed the guide on certbot official website to make it work.
ty dude. I love you
Thanks man, I appreciate you for watching. Happy this was helpful to you!
Hi, I really enjoyed the video, however your video only shows, running a nextjs project on ubuntu when you clone the source code files from git and run the project on the server. my project build files are getting dropped through the Azure Devops release agent as I do not intend to keep the source code files on the server. Please let me know how to deploy I am stuck, your method works when I get the source code files. this is for anyone in the comments too.
With Azure, I'm not sure since I haven't used it at all. With GitHub Actions, I know there's a way to connect to the server via SSH (essentially give GitHub access to the server), so it builds the source code and copies the build files only (similar to what happens with a Dockerfile). That would essentially be the workflow, a CI/CD pipeline, and then the provider would need to have access to the server via SSH.
Amazing video, you just nailed it !!!
Thank you so much, I'm happy it was helpful!
AWESOME video!
Appreciate that! 👍 Glad the video was helpful to you.
best video ever.
Do you have a custom 404 page and does this work?
My 404 on localhost works perfectly but with the nginx it just does not work...
Honestly I'm not 100% sure, but since this is a reverse proxy and it handles all paths but the static path, it should also route the requests that are "not found" to NextJS, since it has no prior knowledge of what routes exist, which would be the case when simply serving static files. I'll give it a try and get back to you here in the comments, thanks for watching!
@@webdevfuel That would be great. Thanks!
Please create a video on cicd pipeline so every time I make changes I don't have to build nextjs and restart pm2
Hey. I actually implemented a CI/CD pipeline at my last job on an app that used pm2. I'll make the video as soon as I can!
@@webdevfuel Great, waiting for the video. Thanks
Great tutorial, thanks a lot!
Thank you so much!
Super useful. Thank you very much for your effort
That's so great, thank you for letting me know this was useful to you!
Thank you so much, this video was so helpful! Can I ask you to make video how to host 2 sites using nginx and pm2?
Thank you, I'm glad it was helpful! Sure, I'll release a video soon on how to have multiple sites with nginx and pm2 running simultaneously.
@@webdevfuel I also want to know, thanks a lot for this video
I just released a video on how to deploy multiple NextJS websites to the same Ubuntu server, let me know if it was helpful!
@@webdevfuel Hi, is it possible to run django and next.js in the same droplet? can you make a tutorial if possible?
Thank you for this video. very informative and helpful. in part 28:45 in this video, in a nginx sites-available file you set up an alias for the location /_next/static directive to point to the .next/static/ folder. I have seen some videos of other developers they do not include this directive. They would just have the location directive that has a proxy_pass to direct requests to NextJS process to handle them.
I would like to know the added benefit of having the location /_next/static directive please. Is it just a matter of choice? Or are there added benefits using the location directive /_next/static ? Thank you very much again for this video.
very quality content 💯
Appreciate that! Glad to know it was helpful. 👍
Which app files do I need to upload to the server to make it work. Let me guess, you don't know because you always let a third party do the thinking for you?
Haha, no. Actually I did this video to teach you how to self-host and avoid using a third-party hosting platform. I go over which files need to be uploaded in the video.
great tutorial.. but next time please don't make the command line fullscreen, because the youtube control and title overlay the last command on the bottom.
Thank you for your feedback, I'll try and add some padding since having to the bottom of the terminal and see if that helps!
Awesome video, thanks a lot!
Thank you, I'm glad it helped you!
Thank you very much
Thank you for watching Arrofi, happy this was helpful to you!
@@webdevfuel Emm i have an error when _next folder is not detected by the browser 404. Can i contact you please ?
@@arrofirezasatria4835 Sure, DM me on Instagram @webdevfuel, I can give you help there with it.
You didn't put a next app on the server, what's it running?
It's running a next app indeed. 😊
Great Job. Thanks a bunch🙏🙏🖖
Thanks!! I appreciate thet. Glad to know the video was helpful to you. 👍
Hey man I like this process and been following. Quick question, how can i pass the env var to the app?
You can use a .env file, they are ignored automatically by git if you generate a NextJS app with the create-next-app CLI. Just add the file to the root of your project, and make sure to prefix with NEXT_PUBLIC_ if you want your client (instead of only the server, like API routes and getServerSideProps) to have access to it.
@@webdevfuel *_Thanks man._*
I followed your process. It seem simple. But when I work with the next js, adding pages and images, then image link is broken. When on other mainpage and refresh the browser, page not shown and show page not found. What's my mistake? I found the solution online, but all is about suggestion, not sulotion. Thanks for your tutor.
Hey Cempaka, thank you for watching! I'd love to help you help! Are you seeing any errors on your browser console? Or you could maybe enable the NGINX logs, to see if there are any errors there. Let me know!
@@webdevfuel Thanks for your reply. Actually it solved right now. I just forget to refresh PM2 when I modified NextJs. Your tutor helps me a lot. Thank and keep on going on making awesome wideo. :)
Awesome content! Thank you! Do all of the Next.js features work deploying this way? like SSR and ISR?
Yes, since we're running with the "yarn start" command everything should work just fine. Did you encounter any problems with that?
@@webdevfuel I haven't deployed yet. I will try it soon.
Thank you, very helpful
Thank you, I'm glad this was helpful to you!
will I have CDN by default as we have in Vercel ?
Not by default, but you can load your static files from any CDN. Thanks for watching! 👍
hey, great vid. can you make another deployment video but with apache?(istead of NGINX)
Hey. I'm not planning on doing one with Apache. But I've been thinking about releasing a new one with Caddy, which I think is easier to deploy with. Thanks for watching! 👍
Why iam update in backend. the Frontend Nextjs not updated new data, i using method getServerSideProps, in page / . Thanks You
did you try rebuilding ?
Did the project have the getServerSideProps function the first time you ran the yarn build command? You might want to try and run yarn build and pm2 restart if you added the function to the website after the first build. There's no caching setup in this tutorial, so the getServerSideProps should run properly.
Sir I want to make changes by root. How can I access I blocked it via firewall as you tell me in this video?
Hey Ahad! You need to create a user, then add the user to the sudo group, so you can run commands as root with the sudo command. I go through these steps in the video at the 6:54 mark. Let me know which part you need help with, I'm happy to help!
Which files of Next.js project do you have to move to the server? I mean, I deploy my nextjs app in my local and give me the '.next' folder, so which files of this folder I have to deploy to the server?
You don't need to build on your local machine. You only need to move to the server the files that are tracked by git (in the video I used git pull to get the files from GitHub), and then run the build command inside the folder on the server.
@@webdevfuel I thought move entire source code to the server was the bad idea.
How can we deploy a NEXTjs app with Nodejs Backend, BTW thanks for the wonderful video it helps me a lot
You'd have to deploy the Node.js backend separately, then make API calls from the Next.js client to the Node.js server (with fetch or axios). I'm glad to know this was helpful to you! 👍
@@webdevfuel A few days ago, I experimented with it, and it worked perfectly. I suggest creating a video about it, as it will greatly assist many aspiring developers.
Hi, whats the way to set enviroment variables for each project, thx!
Awesome Explanation ++++++++++++++++++++++++ Thank You
Thank you Mohamed, I'm happy to know the explanation was good!
Obrigado pa! Tou live =)
Que bom Nuno! Parabéns, é sempre bom ver um site nosso live! Diz-me se precisares de ajuda com outras coisas relacionadas com NextJS ou Linux. Abraço!
Where is the nginx config file's link?
I'll leave you here in the comments a link to the config file Aiden: gist.github.com/emanuelturis/e59a37e80905cf7ff143117b3733eba3
@@webdevfuel thank you so much
Is it possible to link the project with ly github repo and auto deploy ?
Yes, you can create a CI pipeline inside GitHub that automatically deploys on push to a specific repo.
@@webdevfuel can you make a video for this one cuz there is no good one on yt
can you paste nginx config
For sure.
gist.github.com/emanuelturis/e59a37e80905cf7ff143117b3733eba3
I appreciate you watching the video! 👍
at least leave some link for us to know where the git readme coming from
video quality is not good
Hey Deepanshu, this was recorded on a live streaming software, so I was limited to 720p, sorry for that. Hope this can still be helpful to you!