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

Поділитися
Вставка
  • Опубліковано 21 січ 2025

КОМЕНТАРІ • 165

  • @biLLie_wiLLie
    @biLLie_wiLLie Рік тому +70

    Finally someone cares about it

  • @nodirbeksharipov458
    @nodirbeksharipov458 Рік тому +33

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

    • @wazirshehryarali4375
      @wazirshehryarali4375 7 місяців тому

      Hi, Can I know where to store the env variables. I am stuck there. please hepl

    • @milencja3094
      @milencja3094 4 місяці тому

      @@wazirshehryarali4375 hi! i located environmets in file .env.production and its works, but i don't know is it correct :)

    • @harsha.2186
      @harsha.2186 3 місяці тому

      @@wazirshehryarali4375i think set it up in your project directory?

  • @divyanshutripathy3484
    @divyanshutripathy3484 6 місяців тому +2

    This is literal gold. I didn't find such comprehensive guide any where else.

  • @LoadOfJak
    @LoadOfJak 10 місяців тому +3

    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.

    • @gfb47
      @gfb47 7 місяців тому

      But what if we want to host both the next.js site and the php (mysql) site on the same server?

  • @videoponder4673
    @videoponder4673 Рік тому +5

    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.

  • @semerset
    @semerset Рік тому +3

    This tutorial video is GOLD! Thanks a lot!

  • @crysis992
    @crysis992 Рік тому +33

    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.

  • @webwisesagar
    @webwisesagar Рік тому +3

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

  • @krisztiankaposi8054
    @krisztiankaposi8054 Рік тому +1

    Iv been waiting for this for sooo long

  • @christopheradolphe
    @christopheradolphe 11 місяців тому +1

    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!!

  • @ewwitsantonio
    @ewwitsantonio 10 місяців тому +1

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

  • @judoScott
    @judoScott 2 місяці тому

    That was absolutely brilliant! Thank you so much. I would love to see a video about adding an ssl certificate and adding a domain to the site. Thank you again!

  • @lucaskrieck1877
    @lucaskrieck1877 10 місяців тому

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

  • @arthur6892
    @arthur6892 Рік тому +1

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

  • @nicko9958
    @nicko9958 8 місяців тому

    15:21 I get an error when installing npm: "... have unmet dependencied:" ... "Unable to correct problems, you have held broken packages." Did I miss any step?

  • @hadi_2122
    @hadi_2122 Рік тому +1

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

  • @sujjee
    @sujjee Рік тому +9

    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.

  • @omarezeldin4620
    @omarezeldin4620 Рік тому +2

    The Best #papareact 🔥🔥🔥

  • @farshidk49
    @farshidk49 Рік тому +1

    It was very helpful for me. Big Like!

  • @DanielPenaloza-fj8yo
    @DanielPenaloza-fj8yo Рік тому +2

    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.

  • @zyaaco9964
    @zyaaco9964 Рік тому +3

    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?

  • @maneshwam
    @maneshwam 5 місяців тому

    I just deployed my nextjs app in shared hosting. Just took 5 mins. App running smoothly.

  • @Saad_sahib
    @Saad_sahib Рік тому +5

    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

  • @murraywilliams-wd
    @murraywilliams-wd 8 місяців тому

    Thanks Sonny like everyone else I was able to follow your instructions and get my VPS setup so this has been a super helpful video. The issue is that in reality we would never follow this process of setting up a new NextJS app on our server, it's almost always going to be setup and built out locally and then when it's ready to be deployed we need to push it to a server. Pretty please can you explain how we would integrate our Github repo so that we can auto deploy to our hostinger VPS 🙏

  • @tair2347
    @tair2347 10 місяців тому

    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)

  • @shamiul_islam
    @shamiul_islam Рік тому +1

    Thanks man!
    It was very helpful!

  • @taiacolaitiniyara
    @taiacolaitiniyara Рік тому +1

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

  • @bozzhik
    @bozzhik 3 місяці тому

    why does no one tell you about the minimum vps configuration and the recommended one. how do I figure out how powerful a vps I need for next js?

  • @sharurocky8379
    @sharurocky8379 Рік тому +1

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

  • @bimaturity362
    @bimaturity362 6 місяців тому

    wow thumbs up for sure.. well deserved! (and subscribed!)

  • @ZadSoleimaninia
    @ZadSoleimaninia Рік тому +1

    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

  • @crescenttv5918
    @crescenttv5918 5 місяців тому

    is there any benefit of using vps over vercel?

  • @gelarrahadianfajar799
    @gelarrahadianfajar799 5 місяців тому

    it cold, thank you so much sonny, i have one question how if i want to deploy two project in one vps?

  • @bartmercier5436
    @bartmercier5436 Рік тому

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

  • @wazirshehryarali4375
    @wazirshehryarali4375 7 місяців тому

    Hey, Can you please tell me where can I store my env variables in this?

  • @DeepakMishra-cz7fj
    @DeepakMishra-cz7fj 3 місяці тому

    dyanamic route is not working.. Its chunk throws 404. Could you help me to resolve that

  • @jhmcodedev
    @jhmcodedev Рік тому

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

  • @codedusting
    @codedusting Рік тому

    Can we do it in simple website hosting plan?

  • @enitan2002
    @enitan2002 6 місяців тому

    Thanks so much, this video taught me all I needed to know and got everything working on my side. But a quick question, how can you replicate this process for two or more apps that you want to be running on same VPS server. Also how does the server understands from the client's request which repository location that needs to be rendered

  • @marvikfr
    @marvikfr Рік тому

    2 words => Merci Sonny ! 😎

  • @thomasawounfouet7395
    @thomasawounfouet7395 9 місяців тому

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

  • @TusharRedlioDesigns
    @TusharRedlioDesigns 8 місяців тому

    How can i connect my custom domain to deployed next.js app to specific IPAddress ?

  • @ehsanparastegari2003
    @ehsanparastegari2003 Рік тому +1

    Amazing, Thank you

  • @gfb47
    @gfb47 7 місяців тому

    But what if we want to host both the next.js site and the php (mysql) site on the same server?

  • @programmersohel
    @programmersohel Рік тому

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

  • @skphotographyediting8983
    @skphotographyediting8983 11 місяців тому +2

    Sunny it's showing an Error called /etc/nginx/sites-available/nextjs.conf : No such file or directory

    • @UnfairDz
      @UnfairDz 3 місяці тому +1

      Hi, I had the same issue just reinstall Nginx by using those command lines:
      sudo apt-get remove --purge nginx nginx-common
      sudo apt-get install nginx

  • @Kawaiimusician
    @Kawaiimusician 8 місяців тому

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

  • @noobboiii007
    @noobboiii007 4 місяці тому

    Can we deploy Strapi cms project in Hostinger VPS server??

  • @tinotendajoe5852
    @tinotendajoe5852 Рік тому

    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

  • @rezakhani8627
    @rezakhani8627 11 місяців тому

    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.

  • @chuchant7928
    @chuchant7928 8 місяців тому

    Is cloudpanel required? or just ubuntu OS is good enough to start with?

  • @braddockbrawler
    @braddockbrawler Рік тому

    Very useful. Subbed.

  • @inzendis
    @inzendis Рік тому +1

    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!

  • @martin_kuchar
    @martin_kuchar Рік тому

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

  • @protonys
    @protonys Рік тому

    Super content. Thanks !

  • @jhmcodedev
    @jhmcodedev Рік тому

    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 ??

  • @Onepiece_legends
    @Onepiece_legends Рік тому

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

  • @Sietches
    @Sietches Рік тому

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

  • @manuelb9122
    @manuelb9122 Рік тому

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

  • @hacenhacen5814
    @hacenhacen5814 10 місяців тому

    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 ????

  • @BrandonF-z6v
    @BrandonF-z6v Рік тому

    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?

  • @fmspv
    @fmspv Рік тому

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

  • @muhammadtahir-f6n
    @muhammadtahir-f6n Рік тому

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

  • @ashleyrudland
    @ashleyrudland Рік тому

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

    • @SonnySangha
      @SonnySangha  Рік тому

      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!!

    • @ashleyrudland
      @ashleyrudland Рік тому

      @@SonnySangha I mean the VPS, not Vercel

  • @muhammadtahir-f6n
    @muhammadtahir-f6n Рік тому

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

  • @milencja3094
    @milencja3094 4 місяці тому

    wow! its tremendes and exellent job :) thanks a lot for this tutorial

  • @muhammadtahir-f6n
    @muhammadtahir-f6n Рік тому

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

  • @mahianahmed3178
    @mahianahmed3178 Рік тому

    Any resources on maintaining serverless api inside VPS?

  • @Saldymedis
    @Saldymedis 6 місяців тому

    Thank you so much!

  • @harisahmad9323
    @harisahmad9323 Рік тому

    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

  • @victorc.chikezie
    @victorc.chikezie Рік тому

    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?

  • @Ga2-20
    @Ga2-20 Рік тому

    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?

  • @andrew007s
    @andrew007s 11 місяців тому

    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?

  • @preduw
    @preduw Рік тому

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

  • @Finn51531
    @Finn51531 Рік тому

    Very much appreciated.

  • @hamzaakhun
    @hamzaakhun Рік тому

    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

  • @biLLie_wiLLie
    @biLLie_wiLLie Рік тому +2

    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

  • @tauqeerhusain7521
    @tauqeerhusain7521 Рік тому

    Big love sony sir ❤❤

  • @SlaristaMardapani
    @SlaristaMardapani Рік тому

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

  • @ARiyou2000
    @ARiyou2000 Рік тому

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

    • @SonnySangha
      @SonnySangha  Рік тому

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

  • @rafaelldamaso
    @rafaelldamaso 11 місяців тому

    works with cyberpanel?

  • @blahblahblah-u3m
    @blahblahblah-u3m Рік тому

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

  • @vinniv6806
    @vinniv6806 11 місяців тому

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

  • @tomasburian6550
    @tomasburian6550 Рік тому

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

  • @KaiWollherr
    @KaiWollherr 6 місяців тому

    still getting my password denied. Try'd for hours now. Changing it all over again....still not working. Can't even ssh into my Ip.

  • @369-davian
    @369-davian 8 місяців тому

    GOOD JOB!

  • @ekchills6948
    @ekchills6948 6 місяців тому

    this is God sent

  • @nathanielgonzalez9598
    @nathanielgonzalez9598 11 місяців тому

    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.

  • @sahadpop4135
    @sahadpop4135 11 місяців тому

    Need your guide on ssh for this one ❤

  • @saikrishnamuntha62
    @saikrishnamuntha62 Рік тому

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

  • @kasmiraw
    @kasmiraw Рік тому

    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.

  • @tsykin
    @tsykin Рік тому

    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 🙂

  • @ONEOTPOfficial
    @ONEOTPOfficial 9 місяців тому

    production build?

  • @beshoysoliman2331
    @beshoysoliman2331 Рік тому

    can you deploy a nodejs server on it as well?

  • @lp26197
    @lp26197 Рік тому

    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?

  • @babakmahmoodi8741
    @babakmahmoodi8741 Рік тому

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

  • @CartierKray
    @CartierKray Рік тому

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

  • @JRichens
    @JRichens Рік тому

    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 Рік тому

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

  • @blahblahblah-u3m
    @blahblahblah-u3m Рік тому

    Please, what about it apache configuration.

  • @Zakher
    @Zakher Рік тому

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