How to Deploy a Next.js app to a Custom Server - NOT Vercel! (Full Beginner Tutorial)

Step-by-step beginner guide 👉 links.papareact.com/deployment
🔥 Sign up to Hostinger and obtain a VPS server. Use code SONNY for 10% off: www.hostinger.com/sonny
🚨 Learn to code - Join my Flagship Course & Community “Zero to Full Stack Hero”: www.papareact.com/course
-----------------
🔴 Looking for the code from my builds? 🛠️
links.papareact.com/github
📩 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 links.papareact.com/newsletter
👇🏻FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPA Merch: links.papareact.com/merch
🕐 TIMESTAMPS:
00:00 Intro
01:13 Hostinger Sponsorship
02:09 Hostinger Dashboard Setup
03:06 Warp Terminal
03:30 Step 1 | Initialising ssh Command
04:25 Step 2 | Removing Apache2 & Installing Reverse Proxy
06:20 Explaining Remote Proxy
08:59 Step 3 | Setting Up NGINX Configuration
11:54 Step 4 (Crucial) | Creating a Symbolic Link
14:14 Step 5 | Setting Up the Next.js App
20:35 Step 6 | Implementing PM2
23:47 Bonus Step | Modifying the Site
28:04 Hostinger VPS Benefits
28:42 Outro
Let’s get it PAPAFAM 🔥.
#reactjs #nextjs #hosting #vercel

Пікірлер: 138

  • @biLLie_wiLLie
    @biLLie_wiLLie7 ай бұрын

    Finally someone cares about it

  • @LoadOfJak
    @LoadOfJak2 ай бұрын

    Most of my short career has been spent working on PHP and WordPress projects so I’ve had a lot of experience setting up server environments for those, but it’s really great seeing how this process can work for a Next.js project, which is pretty much synonymous with Vercel. Good to see I’m not completely stuck on vercel just because I wanted to use next.js. Great and instructive video.

  • @crysis992
    @crysis9927 ай бұрын

    A video on how to setup auto deployment on a custom server would be awesome. So our app gets build on the server automatically with the latest changes to branch x on git.

  • @pushkarkathayat7893

    @pushkarkathayat7893

    7 ай бұрын

    +1

  • @victoriousinsight

    @victoriousinsight

    5 ай бұрын

    +1

  • @ishrathinaam6723

    @ishrathinaam6723

    5 ай бұрын

    +1

  • @hanserlabber4164

    @hanserlabber4164

    5 ай бұрын

    +1

  • @nodirbeksharipov458
    @nodirbeksharipov4587 ай бұрын

    As a senior software engineer, I know all of these, yet still watched and enjoyed every second of it, kudos to you 🥳

  • @JamesCharlestonII
    @JamesCharlestonII5 ай бұрын

    Sonny, Thank you so much brother. This was a huge part of the missing link that was so close to putting me off to node.js applications. I have own and run my own hosting servers, owned 3 hosting companies, trained and built over 300, but all before the time of Node.js. I could not get things working. I am not following all your processes found in this video, including programming remotely now, but with one modification. I am using Nginx Proxy Manager to manage my Nginx proxy and SSL certificates, with ability to control websockets and Access from one admin panel. It is very very fast. So now I have a complete solution and I am back to loving working with Node.js and Next.js

  • @sujjee
    @sujjee7 ай бұрын

    Hey man! I really enjoyed your videos. I'm currently looking into implementing multi-tenancy (wildcard subdomains). I've read the Vercel documentation and cloned Steves Tey's platform starter kit, but I'm still having trouble understanding the concepts. Would you be able to create a video on this topic that is more beginner-friendly? I'm particularly interested in learning how to use the new Next.js app route feature.

  • @videoponder4673
    @videoponder46735 ай бұрын

    Thank you so so much for this video! This is the explanation of the missing link in the chain. As a self-educator I was desperately searching for exactly this.

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Im so glad it could help!

  • @semerset
    @semerset4 ай бұрын

    This tutorial video is GOLD! Thanks a lot!

  • @arthur6892
    @arthur68924 ай бұрын

    Wow. This video is sooo helpful. I covered all information i want to know. Thank you!

  • @webwisesagar
    @webwisesagar5 ай бұрын

    Thanks Sunny ! The pdf you've given in the description really helps.

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Im glad it could help!

  • @ewwitsantonio
    @ewwitsantonioАй бұрын

    Excellent demonstration! This has cleared up so much for me. Thank!!

  • @ElevateLife896
    @ElevateLife8967 ай бұрын

    Thank you so much. I was dealing with the issue of hosting my website on VPS. Now I can easily do that.

  • @shamiul_islam
    @shamiul_islam7 ай бұрын

    Thanks man! It was very helpful!

  • @krisztiankaposi8054
    @krisztiankaposi80547 ай бұрын

    Iv been waiting for this for sooo long

  • @taiacolaitiniyara
    @taiacolaitiniyara4 ай бұрын

    Thank you very much brother. This video really helped me alot.

  • @DanielPenaloza-fj8yo
    @DanielPenaloza-fj8yo7 ай бұрын

    It would be awesome if you Sonny can make a small guide of managing Nodejs apps (like Nextjs) in a VPS (like hostinger's). Cause sometimes it's really hard to find some relevant information like yours, thanks a lot.

  • @farshidk49
    @farshidk496 ай бұрын

    It was very helpful for me. Big Like!

  • @martin_kuchar
    @martin_kuchar7 ай бұрын

    If I understand you right, you forwarded all requests for your web app to the node server, including requests for images, css etc.?

  • @christopheradolphe
    @christopheradolphe2 ай бұрын

    Thank you for such great content. That's exactly the alternative I was looking for. Oh and by the way, totally unrelated... but that fade hair cut is sick!!

  • @Ga2-20
    @Ga2-207 ай бұрын

    Is it possible to integrate this flow with github? E.g. to have production app on main branch and staging app on develop branch? And when branch is updated then app on the servee also updates?

  • @inzendis
    @inzendis7 ай бұрын

    I have a question when I do VPS do I lose the functionality of features such as middleware and API routes? Its kinda of a dumb question seeing as you are using app router. Its just that I may need to do this exact thing to host a PWA Next.js 13 app that Im doing. Great video, you gave me a solution!

  • @ehsanparastegari2003
    @ehsanparastegari20037 ай бұрын

    Amazing, Thank you

  • @jhmcodedev
    @jhmcodedev7 ай бұрын

    Thanks you Sonny ! Please make more videos like this ! How can i do if i want to publish more than one site using next ??

  • @user-sj2pg7tz7i
    @user-sj2pg7tz7i3 ай бұрын

    Hey Sonny, thanks for the tutorial, very neat and easy to follow! Do you mind sharing what screen recorder software you use? Trying making a few videos for workplace and almost none of them work for me when I'm trying to embed my webcam inside the video in real-time! Thanks

  • @lucaskrieck1877
    @lucaskrieck18772 ай бұрын

    Awesome video, specially the last part where you actually runs in localhost, this will make my work A LOT faster! Huge thanks

  • @tinotendajoe5852
    @tinotendajoe58527 ай бұрын

    Been waiting for these.. Had been deploying my apps to a vps but wanted someone to share latest standards on how to do it esp auto deploys with web hooks or something

  • @saikrishnamuntha62
    @saikrishnamuntha627 ай бұрын

    bro I need with external api like python or node js to integrate with nextjs on Login apis

  • @Finn51531
    @Finn515316 ай бұрын

    Very much appreciated.

  • @protonys
    @protonys5 ай бұрын

    Super content. Thanks !

  • @zyaaco9964
    @zyaaco99646 ай бұрын

    As a complete beginner to hosting, how safe is this? Like would I be able to create a nextjs app that i know is safe if i was to host it on vercel and be able to host it on a vps or do i need to take extra security measures? and is the process the same on other hosting websites that let you create a vps?

  • @omarezeldin4620
    @omarezeldin46207 ай бұрын

    The Best #papareact 🔥🔥🔥

  • @lp26197
    @lp261977 ай бұрын

    Hello my friend, I am following you and I want advice from you. I am a front-end developer and I use next js and I have worked on actual projects and I want to start in the back-end field. You advise me to start with C# or Javascript framework and work. I am very confused. Please help me. From your point of view, what is best?

  • @Kawaiimusician
    @Kawaiimusician11 күн бұрын

    Hi Sonny! I was wondering if you have any advice about setting up an SSL Certificate in a VPS environment?

  • @victorc.chikezie
    @victorc.chikezie6 ай бұрын

    This is so beautiful. What if there is an error and I don't want users to see it yet until it's fixed, how do I do that since I'm working directly to the project folder from my remote vscode?

  • @braddockbrawler
    @braddockbrawler4 ай бұрын

    Very useful. Subbed.

  • @marvikfr
    @marvikfr4 ай бұрын

    2 words => Merci Sonny ! 😎

  • @manuelb9122
    @manuelb91225 ай бұрын

    Thanks for this video. I want a video for ssl conf. Thanks in advance 🤜

  • @sharurocky8379
    @sharurocky83797 ай бұрын

    Hi broo..Enjoyed and totally loved it❤ Please bring SSL certification video

  • @babakmahmoodi8741
    @babakmahmoodi87417 ай бұрын

    Thanks a lot. Please teach us load balancing and ssl and dns

  • @hamzaakhun
    @hamzaakhun4 ай бұрын

    This is awesome to deploy to custom server, lots of nextjs devs are searching for ... But a Major question here. Will app router middlewares and api route in nextjs work with this way????? Thanks

  • @aminataeidev
    @aminataeidev5 ай бұрын

    thanks bro

  • @programmersohel
    @programmersohel6 ай бұрын

    Great! how can you use Deferent node version my various app?

  • @Saad_sahib
    @Saad_sahib7 ай бұрын

    Sonny! You're raising the top level of education available to us Your videos are enlightening to us and providing new knowledge thanks bro🙂 my English is not Soo good but I hope you under stand

  • @hacenhacen5814
    @hacenhacen58142 ай бұрын

    after deploying next.js e.commerce plateform in hostinger, does it have bills to pay like vercel, cause i've watched a lot of people complaining about the hight bills to pay in vercel and now i'm afraid that this happens too in hostinger, so can anyone lead me to what is the best buisness plan to choose and what are the do's and dont's that i must to have in mind ????

  • @beshoysoliman2331
    @beshoysoliman23317 ай бұрын

    can you deploy a nodejs server on it as well?

  • @thomasawounfouet7395
    @thomasawounfouet739524 күн бұрын

    Thanks for the bonus with remote - ssh . It’s really awesome

  • @RicardoPerez-gt1vh
    @RicardoPerez-gt1vh14 күн бұрын

    GOOD JOB!

  • @Sietches
    @Sietches6 ай бұрын

    Very beginner friendly guide. Please do the SSL setup video!

  • @user-sg7pp7bv4l
    @user-sg7pp7bv4l6 ай бұрын

    I have purchased kvm2 hosting. and complete initial setups. how can i upload my nextjs project now. i want to deploy via github.

  • @Onepiece_legends
    @Onepiece_legends7 ай бұрын

    ❤ u got your self a new sub with a bench of likes , thank you bro

  • @andrew007s
    @andrew007s3 ай бұрын

    Hello, my backend is PHP. Can I install PHP on Ngix? Can you make a video on how a Next.js app would work with PHP?

  • @tair2347
    @tair23472 ай бұрын

    I don't write comments at videos at all, but this one is such a good video with grained explanation and showcase. Thank you very much!!! (And doc btw is very useful)

  • @SonnySangha

    @SonnySangha

    2 ай бұрын

    Thank you so much!!!

  • @codedusting
    @codedusting6 ай бұрын

    Can we do it in simple website hosting plan?

  • @harisahmad9323
    @harisahmad93237 ай бұрын

    As a Sr. frontend developer, I already have the above but still enjoyed watching on 2x speed 😅, also it will be great to make the ssh for it too

  • @JRichens
    @JRichens7 ай бұрын

    Sonny - Amazing... Just need SSL and how to forward my domain I purchased From GoDaddy to my IP address, or instructions where to do so! Thank you so much

  • @JRichens

    @JRichens

    7 ай бұрын

    Did this with Certbot and forwarded my domain with A method - sorted

  • @user-jg8sd9te5b
    @user-jg8sd9te5b5 ай бұрын

    is this only possible by paying? I got a hostinger domain and hosting because youtubers told me to, while i was building nextjs apps, and then i pay for it and find out i can't host nextjs apps, and i have to pay for a vps now? super frustrated. is there a free option?

  • @rezakhani8627
    @rezakhani86273 ай бұрын

    Hello, I bought a virtual server with 3 cores and 2GB of RAM, and I uploaded a very simple Next project to it. Inside this project, I installed the libraries `react-icon`, `react-toastify`, `next-auth`, and `tailwind`. Then, when I tried to build the project on the server, it me an error about unsupported CPU and said it couldn't do it. I want to know, is Next.js really that heavy that it can't even build a medium or small-scale project on such a server? Can you guide me and tell me if using Docker would make a? Please explain.

  • @googleusers
    @googleusers7 ай бұрын

    bro thanks you

  • @tauqeerhusain7521
    @tauqeerhusain75217 ай бұрын

    Big love sony sir ❤❤

  • @mahianahmed3178
    @mahianahmed31784 ай бұрын

    Any resources on maintaining serverless api inside VPS?

  • @jhmcodedev
    @jhmcodedev5 ай бұрын

    There is no way to generate a statci/dist/out folder with all the javascript/css/html and upload this folder in the vps instead of upload the whole app . i mean like we do using vite ??

  • @bartmercier5436
    @bartmercier54367 ай бұрын

    Cool from an old grand daddy : i love your Channel.😊

  • @user-ty3iu3zv3d
    @user-ty3iu3zv3d6 ай бұрын

    or can one create an nginx server for a subdomain because the entire vps is built on apache server

  • @tsykin
    @tsykin3 ай бұрын

    Thank you so much for this guide, it was very helpful! Do you mind if I create my own guide on how to deploy Next.js app to Google Cloud VM on free tier using the knowledge that I got from this video? I think it will be beneficial for the dev community 🙂

  • @user-sg7pp7bv4l
    @user-sg7pp7bv4l6 ай бұрын

    Can I use putty on windows 10 to connect with server.

  • @humble-podcast
    @humble-podcast5 ай бұрын

    Awesome, how do you do this but have it auto deploy from github? same setup, just auto deploy?

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    In Vercel dashboard you can connect your GitHub in the integrations panel, once you do this pushing to master/main can trigger a deployment! Hope this helps!!

  • @humble-podcast

    @humble-podcast

    5 ай бұрын

    @@SonnySangha I mean the VPS, not Vercel

  • @rafaelldamaso
    @rafaelldamaso3 ай бұрын

    works with cyberpanel?

  • @user-sg7pp7bv4l
    @user-sg7pp7bv4l6 ай бұрын

    warp is not available for windows, please, recommend any other terminal for this setup

  • @nathanielgonzalez9598
    @nathanielgonzalez95982 ай бұрын

    Great video, but I have a couple questions I'm hoping someone can help me out with. 1.) How do you deploy a Nextjs project that I've created that is on my desktop or on GitHub? Sonny only shows how to upload a newly created project. 2.) I followed Sonny's example and it worked perfectly. However, where is the project stored? I cannot find it using the CloudPanel GUI. It is not located under the "Sites" tab, so I'm not sure where I could go to access it. Thank you to anyone that is able to help me. I really appreciate it.

  • @vinniv6806
    @vinniv68063 ай бұрын

    I hope you will create tutorial how to do the same with docker images and github repo

  • @SlaristaMardapani
    @SlaristaMardapani7 ай бұрын

    Sir ck you create videk for use ssl on this video?

  • @imranhassan3636
    @imranhassan36364 ай бұрын

    How do I add images in the public folder of the app? Can anyone help me on this please.

  • @kasmiraw
    @kasmiraw7 ай бұрын

    Hey Sonny, you are the one who taught me ReactJs, which opened up the path for my career and startup. Wish you all the best.

  • @jackfrosch
    @jackfrosch7 ай бұрын

    Fyi, NGINX is pronounced like "engine x".

  • @biLLie_wiLLie
    @biLLie_wiLLie7 ай бұрын

    Thank you for this video! I would like you to explain more about deploy. This topic is quite tricky for a not backender. Perhaps making a clone of functionality of vercel (connecting git to server) on this channel can collect a million of likes

  • @preduw
    @preduw5 ай бұрын

    Do I get this right? You are entering your root password on a third party terminal emulation website? Are there any security concerns?

  • @CartierKray
    @CartierKray3 ай бұрын

    This is gold bruh gold👏🏾 goin make shmoneyyy with this

  • @SonnySangha

    @SonnySangha

    3 ай бұрын

    Glad you liked it!

  • @chi-mf1cx
    @chi-mf1cx7 ай бұрын

    hey sonny I want ci/cd pipline for this server

  • @sahadpop4135
    @sahadpop41352 ай бұрын

    Need your guide on ssh for this one ❤

  • @ONEOTPOfficial
    @ONEOTPOfficialАй бұрын

    production build?

  • @tomasburian6550
    @tomasburian65504 ай бұрын

    This seems quite complicated, can't I just host the app on my own hosting where I put my regular web pages?

  • @elyastigre9867
    @elyastigre98677 ай бұрын

    Hey ! Super video ! What is the software used to draw ?

  • @israilgulzar7936
    @israilgulzar7936Ай бұрын

    supper cool about nginx because i have the same kvm2 and every thing same ... now just need to attach it with domain name and with subdomain tooo so plz create video for that ... or if u have already then drop link here plz

  • @kakashizet7496
    @kakashizet74964 ай бұрын

    please make tutorial for deploy next js 13 with app router in cPanel.

  • @biztechadvisors4337
    @biztechadvisors43377 ай бұрын

    Hello sunny thanks brother, can you please suggest how to deploy the nestjs typeorm nodejs dackend on aws please.

  • @gavit633
    @gavit6337 ай бұрын

    Hey sonny please make a mern stack cart project with reudx toolkit and node api . im beeginer now so help me 😪

  • @user-ty3iu3zv3d
    @user-ty3iu3zv3d6 ай бұрын

    Please, what about it apache configuration.

  • @vimalsonara2819
    @vimalsonara28197 ай бұрын

    Let's do it.

  • @ariyoujahan9662
    @ariyoujahan96626 ай бұрын

    Wow. Why does such an amazing video have just this many likes?

  • @SonnySangha

    @SonnySangha

    6 ай бұрын

    We will grow don’t worry 🙏🏽 thank you so much for the support!!

  • @tdombui
    @tdombui3 ай бұрын

    The sharpest eye brows in software engineering

  • @SonnySangha

    @SonnySangha

    3 ай бұрын

    Haha I love this!

  • @Zakher
    @Zakher4 ай бұрын

    Would love to see a self-hosted github runner + monorepo project

  • @user-hb6yb6bu8n
    @user-hb6yb6bu8n7 ай бұрын

    Please, ur livestream setup 🙏

  • @user-kr4du9xe8s
    @user-kr4du9xe8s7 ай бұрын

    Is there a way to do this using shared hosting?

  • @Jey_Em

    @Jey_Em

    7 ай бұрын

    My reply keep getting deleted for some reasons. It might be because of the domain name example. Let me repeat it. First, you need to register a domain name. Once you have the domain, you'll need to configure the DNS records to point to your shared hosting server's IP address. Instead of directly adding the IP address in your Nginx configuration, you'll configure Nginx to use your domain name. For example, if you've set up (domain name) to target your shared hosting server's IP address, you would configure Nginx to use (domain name) in its configuration instead of the IP address. You can repeat this process for multiple domains or even subdomains. This approach allows you to host multiple websites/apps on the same shared hosting server, even though they all share the same underlying IP address. Just ensure that each domain or subdomain is correctly pointed to your shared hosting server in the DNS settings.

  • @knuseski
    @knuseski6 ай бұрын

    Great tutorial, but I dont like remote coding.... You can work locally, commit and push changes on git, and then pull changes and rebuild the app

  • @kacperkepinski4990
    @kacperkepinski49904 ай бұрын

    how to deploy next using filezilla?

  • @engageintellect
    @engageintellect7 ай бұрын

    Engine X*

  • @toadtws

    @toadtws

    4 ай бұрын

    Not gonna lie, I LOLed.

  • @vernevens1598
    @vernevens1598Ай бұрын

    I didn't see you move any application files to your server. How did you build an app from nothing? How do you Deploy a Next.js app to a Custom Server?

  • @hubesh716
    @hubesh7167 ай бұрын

    Sonny sir plz make React native Full Stack Projects series plz sir we need React native Stuff

  • @vernevens1598
    @vernevens1598Ай бұрын

    I refuse to install woke Hub so what files from my local drive do I need to move to my remote server after I build the next app.

  • @xxapoloxx
    @xxapoloxx5 ай бұрын

    It is stated that dev is not production ready