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

Поделиться
HTML-код
  • Опубликовано: 1 дек 2024

Комментарии • 63

  • @fallensach
    @fallensach 9 месяцев назад +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  9 месяцев назад

      Glad my guide helped you 👍

  • @midgelfc
    @midgelfc 11 месяцев назад +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!

  • @makobakaweme2821
    @makobakaweme2821 3 месяца назад +1

    Thanks guy. This video really helped me.

    • @tsykin
      @tsykin  2 месяца назад

      You're welcome! 😊

  • @kadir6411
    @kadir6411 9 месяцев назад +1

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

    • @tsykin
      @tsykin  9 месяцев назад

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

  • @a6gittiworld
    @a6gittiworld 4 месяца назад +1

    great tutorial 🙏 u got a new sub 👍

    • @tsykin
      @tsykin  4 месяца назад +1

      Thanks a lot for the sub 👍

  • @uzayrballim130
    @uzayrballim130 2 месяца назад +1

    Really good video, thanks man!

    • @tsykin
      @tsykin  2 месяца назад

      Glad you liked it!

  • @MasItings
    @MasItings 8 месяцев назад +2

    Very helpfull ! Thank you man..

    • @tsykin
      @tsykin  8 месяцев назад +1

      Glad that it worked for you 👍

  • @felixjumason4859
    @felixjumason4859 4 месяца назад +1

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

    • @tsykin
      @tsykin  4 месяца назад

      Great to hear! You can share a link here 🙌

  • @jodierizky-
    @jodierizky- 2 месяца назад +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.

  • @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.

  • @proflead
    @proflead 4 месяца назад +1

    Thanks for the video! :)

    • @tsykin
      @tsykin  4 месяца назад

      You are welcome! 😊

  • @bobleeswa
    @bobleeswa 3 месяца назад +1

    Works. Thanks!

  • @maxwell-cj3ds
    @maxwell-cj3ds Месяц назад

    thanks for tutorial❤❤

    • @tsykin
      @tsykin  Месяц назад

      You're welcome 😊

  • @ahmedsyed671
    @ahmedsyed671 11 месяцев назад +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 9 месяцев назад

      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

  • @adnanalemran
    @adnanalemran 9 месяцев назад

    Great tutorial,

  • @asrarahmed1629
    @asrarahmed1629 8 месяцев назад +1

    Thanks
    Very helpful!...

    • @tsykin
      @tsykin  8 месяцев назад

      You are very welcome 😊

  • @festojoseph1071
    @festojoseph1071 11 месяцев назад

    Super helpful 👍👍👍! Thanks a lot.

    • @tsykin
      @tsykin  11 месяцев назад

      Glad it was helpful!

  • @easyhojao5944
    @easyhojao5944 10 месяцев назад +1

    super useful

    • @tsykin
      @tsykin  10 месяцев назад

      Glad it helped 🙃

  • @toth4739
    @toth4739 Год назад +1

    great tutorial 👍👍👍

    • @tsykin
      @tsykin  Год назад +1

      Thanks, glad I could help 😊

  • @cloudsss83
    @cloudsss83 Год назад

    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  Год назад

      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 😊

  • @adamczarny6482
    @adamczarny6482 7 месяцев назад +1

    thanks!

    • @tsykin
      @tsykin  7 месяцев назад

      Happy to help 😊

  • @who-hoo-man
    @who-hoo-man 7 месяцев назад

    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  7 месяцев назад

      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 7 месяцев назад

      @@tsykin Ohkay thanks for the info 👍

  • @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💪💪🚀🚀🔥🔥

  • @Thess6969
    @Thess6969 11 месяцев назад +1

    Thanks 🎉

    • @tsykin
      @tsykin  11 месяцев назад

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

  • @VASILASIS
    @VASILASIS 9 месяцев назад +1

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

    • @tsykin
      @tsykin  9 месяцев назад +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 9 месяцев назад +1

      @tsykin sorry, my fault 😔

    • @tsykin
      @tsykin  9 месяцев назад

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

    • @VASILASIS
      @VASILASIS 9 месяцев назад

      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  4 месяца назад

      Yes, it should work for Static Site Generation.

  • @webdesigncodefrance
    @webdesigncodefrance Год назад +1

    Thanks ! So useful

    • @tsykin
      @tsykin  Год назад

      Glad it helped 😊