How to deploy Next.js app to Firebase Hosting? Simple step-by-step tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 10 พ.ย. 2024

ความคิดเห็น • 63

  • @fallensach
    @fallensach 8 หลายเดือนก่อน +6

    the enable experimental webframeworks is a life saver. i debugged for so many hours but this setting finally automated the deploy process

    • @tsykin
      @tsykin  8 หลายเดือนก่อน

      Glad my guide helped you 👍

  • @midgelfc
    @midgelfc 10 หลายเดือนก่อน +1

    Great tutorial, appreciate you taking the time and step by step guide, worked perfectly for me 🙏

    • @tsykin
      @tsykin  10 หลายเดือนก่อน +1

      I am really glad to hear that, thanks for feedback!

  • @felixjumason4859
    @felixjumason4859 3 หลายเดือนก่อน +1

    Bro you are a life saver my demo is ready for google io

    • @tsykin
      @tsykin  3 หลายเดือนก่อน

      Great to hear! You can share a link here 🙌

  • @makobakaweme2821
    @makobakaweme2821 2 หลายเดือนก่อน +1

    Thanks guy. This video really helped me.

    • @tsykin
      @tsykin  2 หลายเดือนก่อน

      You're welcome! 😊

  • @uzayrballim130
    @uzayrballim130 2 หลายเดือนก่อน +1

    Really good video, thanks man!

    • @tsykin
      @tsykin  2 หลายเดือนก่อน

      Glad you liked it!

  • @MasItings
    @MasItings 7 หลายเดือนก่อน +2

    Very helpfull ! Thank you man..

    • @tsykin
      @tsykin  7 หลายเดือนก่อน +1

      Glad that it worked for you 👍

  • @jodierizky-
    @jodierizky- หลายเดือนก่อน +1

    Thanks for the tutorial! I’m currently migrating my current live portfolio (already with firebase) from basic html/css/js to nextjs/tailwind.
    I have a question: so I just need to select the "Use an existing project" option (which is my live portfolio) to deploy the new nextjs portfolio? And would the files of my old portfolio be automatically fully replaced?

    • @tsykin
      @tsykin  หลายเดือนก่อน

      If you already have a project and choose it when deploying then yes, files will be replaced.

  • @kadir6411
    @kadir6411 9 หลายเดือนก่อน +1

    thank you for this tutorial, saved me a lot of time!

    • @tsykin
      @tsykin  8 หลายเดือนก่อน

      You are welcome, make sure to check out my website to find more free methods of deploying Next.js

  • @davidlintin
    @davidlintin ปีที่แล้ว +2

    Thanks for this tutorial - got my site up and running. I'd be interested in a more complex tutorial with subdomains :)

    • @tsykin
      @tsykin  ปีที่แล้ว

      Thanks for the feedback. You can deploy to a subdomain the same way as your main domain 😉

    • @davidlintin
      @davidlintin ปีที่แล้ว

      @@tsykin how 😢 with Next JS 13

    • @tsykin
      @tsykin  ปีที่แล้ว

      @@davidlintin i think you can just deploy your app following my guide and then assign this app a domain in firebase.

  • @a6gittiworld
    @a6gittiworld 3 หลายเดือนก่อน +1

    great tutorial 🙏 u got a new sub 👍

    • @tsykin
      @tsykin  3 หลายเดือนก่อน +1

      Thanks a lot for the sub 👍

  • @bobleeswa
    @bobleeswa 3 หลายเดือนก่อน +1

    Works. Thanks!

  • @maxwell-cj3ds
    @maxwell-cj3ds 17 วันที่ผ่านมา

    thanks for tutorial❤❤

    • @tsykin
      @tsykin  9 วันที่ผ่านมา

      You're welcome 😊

  • @proflead
    @proflead 3 หลายเดือนก่อน +1

    Thanks for the video! :)

    • @tsykin
      @tsykin  3 หลายเดือนก่อน

      You are welcome! 😊

  • @adnanalemran
    @adnanalemran 8 หลายเดือนก่อน

    Great tutorial,

  • @asrarahmed1629
    @asrarahmed1629 7 หลายเดือนก่อน +1

    Thanks
    Very helpful!...

    • @tsykin
      @tsykin  7 หลายเดือนก่อน

      You are very welcome 😊

  • @festojoseph1071
    @festojoseph1071 10 หลายเดือนก่อน

    Super helpful 👍👍👍! Thanks a lot.

    • @tsykin
      @tsykin  10 หลายเดือนก่อน

      Glad it was helpful!

  • @easyhojao5944
    @easyhojao5944 9 หลายเดือนก่อน +1

    super useful

    • @tsykin
      @tsykin  9 หลายเดือนก่อน

      Glad it helped 🙃

  • @toth4739
    @toth4739 ปีที่แล้ว +1

    great tutorial 👍👍👍

    • @tsykin
      @tsykin  ปีที่แล้ว +1

      Thanks, glad I could help 😊

  • @adamczarny6482
    @adamczarny6482 6 หลายเดือนก่อน +1

    thanks!

    • @tsykin
      @tsykin  6 หลายเดือนก่อน

      Happy to help 😊

  • @ahmedsyed671
    @ahmedsyed671 10 หลายเดือนก่อน +1

    I have a next 14 app running nicely but when i deploy it on firebase the videos are not uploaded when i check the source of the website.

    • @tsykin
      @tsykin  10 หลายเดือนก่อน

      Make sure that files are included in the project. Also, are images being uploaded normally for you?

    • @italonolasco5142
      @italonolasco5142 8 หลายเดือนก่อน

      Hello guys, I have the same problem. I discovered that occurs because the default req for next server contains _next in the url, and firebase doesn't support this. There's some tutorials on the web teaching how to configure, but just older versions of Next. Can you guys solved the problem?@@tsykin

  • @Thess6969
    @Thess6969 11 หลายเดือนก่อน +1

    Thanks 🎉

    • @tsykin
      @tsykin  11 หลายเดือนก่อน

      You are welcome 😊
      Hopefully that helped you deploy your app to Firebase Hosting

  • @cloudsss83
    @cloudsss83 11 หลายเดือนก่อน

    Great tutorial! thanks. Just one question, do you know if all the features from Next.js, like server side components/functions and etc are available when using Firebase hosting? I did read somewhere that a Node.js server is needed for that, but I don't have a clue of how Firebase hosting works.

    • @tsykin
      @tsykin  11 หลายเดือนก่อน

      Thanks for feedback. I am yet to test deployment of an app with advanced functionality, so I might come back with information on that. For now it's up to you to use my tutorial to test out those features 😊

  • @who-hoo-man
    @who-hoo-man 6 หลายเดือนก่อน

    If you don't have a pay-as-you-go plan on firebase, this won't work. You're better off deploying with vercel or netlify. It is also much faster

    • @tsykin
      @tsykin  6 หลายเดือนก่อน

      Of course using hosting platform is faster and easier. But it's also pricy and sometimes lacks ability to go inside the machine that hosts your app. That's why I showed how to host you Next.js app for free on a VM 😊
      And yes, you might need to add credit card details to Google Cloud when setting this up, but you won't be charged anything if done correctly.

    • @who-hoo-man
      @who-hoo-man 6 หลายเดือนก่อน

      @@tsykin Ohkay thanks for the info 👍

  • @VASILASIS
    @VASILASIS 8 หลายเดือนก่อน +1

    You forgot to mention that Firebase require you to have paid account for this - Pay as You Go

    • @tsykin
      @tsykin  8 หลายเดือนก่อน +1

      Thanks for the feedback 😊
      Actually, I did mention it in my post (text version of this tutorial). Check the first link in the description

    • @VASILASIS
      @VASILASIS 8 หลายเดือนก่อน +1

      @tsykin sorry, my fault 😔

    • @tsykin
      @tsykin  8 หลายเดือนก่อน

      @@VASILASIS it's OK. Did it work for you after all?

    • @VASILASIS
      @VASILASIS 8 หลายเดือนก่อน

      Yes, but still requires HTTPS when call backend :-( The same as Vercel. So - no difference between Vercel deploy and Firebase
      @@tsykin

  • @aungmyooo9692
    @aungmyooo9692 4 หลายเดือนก่อน +1

    Is work for SSG?

    • @tsykin
      @tsykin  3 หลายเดือนก่อน

      Yes, it should work for Static Site Generation.

  • @rakeshpr9086
    @rakeshpr9086 ปีที่แล้ว

    Normal pages are loading fine, But when I deploy nextjs project with dynamic pages I'm getting error like this.
    Building a Cloud Function to run this application. This is needed due to:
    • non-static component /todos/[id]/page
    Unable to bundle next.config.js for use in Cloud Functions, proceeding with deploy but problems may be enountered.
    The command line is too long.
    How can solve this issue?

    • @tsykin
      @tsykin  ปีที่แล้ว +2

      Thanks for reporting this. To be honest I am a beginner developer and I have not encountered this issue.
      Hopefully someone more experienced will reply to your comment.

    • @heynerhumanez4406
      @heynerhumanez4406 ปีที่แล้ว +4

      Put "use client" all of pages if you don't use Server Side Rendering

    • @hoangnhatphamvuong4934
      @hoangnhatphamvuong4934 ปีที่แล้ว

      @@heynerhumanez4406 Thank you very much

    • @_officialbeatstreet
      @_officialbeatstreet ปีที่แล้ว +1

      wow i really like the zeal just continue it will pay off later💪💪🚀🚀🔥🔥

  • @webdesigncodefrance
    @webdesigncodefrance ปีที่แล้ว +1

    Thanks ! So useful

    • @tsykin
      @tsykin  ปีที่แล้ว

      Glad it helped 😊