Building a Native Mobile App with Next.js and Capacitor

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

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

  • @galaxies_dev
    @galaxies_dev  Год назад +3

    Want to learn more about web development and native mobile apps? That's great!
    Check out my new platform galaxies.dev/ for practical courses & more tutorials 🚀

  • @RuanHuysen
    @RuanHuysen 2 года назад +27

    Dude... I was literally going to copy and reformat my entire NextJS codebase into Ionic React... then you made this!

  • @notevoyadarminombre156
    @notevoyadarminombre156 2 года назад +24

    This is awesome! Maximizing code reusability is a must if you have a small team or you are a solo developer!

  • @catchup237
    @catchup237 2 года назад +8

    For the image optimization problem, I used the chakra UI Image component and it works just fine for me.

  • @impairedmaps
    @impairedmaps Год назад +3

    Simons written tutorial is excellent and thorough. React on Capacitor works like a trick. Nextjs on Capacitor requires some thought on getStaticProps and getServerSideProps but otherwise works flawlessly by the end of his guide as well !

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

      can you please elaborate on this @impairedmaps?

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

      @@urbatecture getServerSideProps and get static props run during the build. But don't run when the app or page is loaded. You essentially lose a lot of server side next js features, because the html/js is created during the build with `next export`, and static html/js is running in the mobile app

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

    Thanks for this, it handles well the UI part
    For the API, what do you suggest? still deploying on vercel?
    Also how do you handle .env files.
    Thanks

  • @AlexanderRich777
    @AlexanderRich777 Год назад +2

    Cool. This is exactly what I was looking for!

  • @Lil2Impulsive
    @Lil2Impulsive 7 месяцев назад +2

    I have a next js project with some server side functionalities (main core of next) and when I try to create a static export I encounter this error: server actions are not supported with static exports. Is there a way to fix this because otherwise it makes next useless to use Capacitor...

    • @borisbarzotto5785
      @borisbarzotto5785 6 месяцев назад

      hi, same problem here, do you solved? or this only work for static sites?

  • @ryanhopper-lowe3639
    @ryanhopper-lowe3639 Год назад +2

    This is an awesome video! I love the simplicity of Capacitor since I've never touched mobile development. Can you please make a video about integrating authentication between Capacitor and NextJS App Router using something like NextAuth???

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

      Agreed! A video on this would be helpful for understanding the use cases of the different routing designs for Capacitor and NextJs

  • @CashflowCalendar
    @CashflowCalendar 18 дней назад

    Hello thank you for this tutorial, when I try to export my nextjs site i run into Server Actions are not supported with static export. Any idea how to navigate this?

  • @seanknowles9985
    @seanknowles9985 2 года назад +2

    How to turn off image optimisation just for exports and to leave it on for normal operations? At the moment it seems as if we need two different projects if we want to use image optimsation for the web portion...

    • @catchup237
      @catchup237 2 года назад

      I used Chakra UI as my UI library and used its image component which works just fine for me. Maybe you should try that.

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

    at 12:00, I had to play video at 0.25x speed to understand what command did you run to sync the project on iOS Simulator. It was `npm run dev`.

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

    Thank you Simon! Awesome stuff!!!

  • @dylanvanhout806
    @dylanvanhout806 2 года назад

    Thank you so much for this video tutorial! It has been very informative and helpful to me. Keep up the great content!

    • @dylanvanhout806
      @dylanvanhout806 2 года назад

      I had trouble with the images when using your code at 6:27. I removed experimental block and only used images block (as per the docs). images: { unpotimized: true, },

  • @AzirChai
    @AzirChai 5 месяцев назад

    Quick question, about .env variables data, how would you handle those? Or insert Those? Nice video !!

  • @timlambe8837
    @timlambe8837 2 года назад +2

    Great video 😃
    Does this still work if you have a fullstack NextJS WebApp with database connected?

    • @galaxies_dev
      @galaxies_dev  2 года назад +2

      Well the problem are the cloud functions or API routes, you don't really have that in a local app!

    • @timlambe8837
      @timlambe8837 2 года назад

      @@galaxies_dev thanks. do you have any advice, how i could solve this without recoding the backend ?

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

      ​@@timlambe8837did you find any answer for this.?

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

    is there also a way to do it with the app directory instead of the pages?

  • @a-yo9312
    @a-yo9312 3 месяца назад

    Do i need to do anything as for my api routes? With nextjs app router

  • @ivanilsonmartins_
    @ivanilsonmartins_ 2 года назад

    Greetings Simon.
    I would like to know what is the best way to follow my app. Using the Ionic with the capacitor or in this way that you showed in the video?

    • @galaxies_dev
      @galaxies_dev  2 года назад

      There is really no best - every approach has pros and cons!

  • @mauroinde
    @mauroinde 2 года назад

    Hey simon, is it working all the next methods? the server side rendering part, or do I need to change it?
    I mean, I know that there is not SEO in an app, but I dont know if those methods that I already have in my app, are working fine on mobile to recommend capacitor?
    off course, not Ionic required, just next and capacitor

    • @galaxies_dev
      @galaxies_dev  2 года назад +1

      I don't think the API endpoints will work. I would rather use the absolute URL if you want to call an endpoint which would then use the API of your web version

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

    i love it
    please make video and big project with this Technology

  • @the.monologue
    @the.monologue 3 месяца назад

    keep up the good work!

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

    now only nuxt and sveltekit with capacitor are missing

  • @danielson9490
    @danielson9490 2 года назад +1

    Nice video, I'm very intriguing about the server. What about the next server? The native deploy include it? Or we need a custom server?

    • @galaxies_dev
      @galaxies_dev  2 года назад

      No there would be no API as you just create a static build of your Next project!

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

      ​@@galaxies_devI couldn't get, are you saying that we can't build an Android app from the next js dynamic web application?

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

    AAAAlrightttt! Thank you for another video as great asssssss you.

  • @catchup237
    @catchup237 2 года назад

    I love this idea, But I kinda have a problem; I have a web app on firebase, so how do I get the app running with capacitor? please I really need some help on that

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

    depois dessa já posso colocar no meu curriculo "capacitorjs"

  • @SrikanthGottipati-il4li
    @SrikanthGottipati-il4li 2 года назад

    Hi Simon, Thanks for making this video. It helped a lot. Would you let us know how to add deep linking that can route us to mobile application by clicking an URL.

    • @galaxies_dev
      @galaxies_dev  2 года назад

      It's complicated, but here's a post I made about that topic with Angular: devdactic.com/setup-deep-links-capacitor

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

    Thanks for the video. Looks like a pain to work with, but probably worth it compared to spending the time to learn Flutter, so I'm going to give this a try. I use Svelte with Routify for web apps, so hopefully the SvelteKit problems won't be applicable to me. Once Tauri supports mobile, I'll probably end up switching to that, which I've been trying out for making desktop apps and it just works - seems like for anything written in Rust, the developers are just great at making it a painless experience. The whole "npx cap sync" shown in the video really should be automatic considering this is version 4.

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

      hey i got this error after i typed npx cap open android in android studio package android.content does not exist can you please help me

  • @ivanilsonmartins_
    @ivanilsonmartins_ 2 года назад

    Hi Simon, do you have plans for a video on how to migrate my ionic app from capacitor 3 to capacitor 4?
    I'm talking about the news about Android API 31 - 33 update

    • @galaxies_dev
      @galaxies_dev  2 года назад

      No haven't taken a look at that problem yet - is it difficult?

    • @ivanilsonmartins_
      @ivanilsonmartins_ 2 года назад

      @@galaxies_dev I believe it is not difficult. But there are some changes that are extremely profound. For example Capacitor/storage has undergone some changes in v4, and other plugins as well. On android variables.gradle, AndroidManifest.xml and MainActivity.java need a special look. In IOS there are several changes in the assets like ios/App/Podfile
      AppDelegate.swift
      I just think it would be a video that would help a lot of people because the documentation leaves some holes in the explanation.

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

    That does not introduce useless code and dependencies to our webapp? Can we use nx to split the project into a webapp and a capacitor native app? Tnx in advance Simon

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

      Yeah I have seen other projects with nx, think it could work but haven't done so yet.

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

      @@galaxies_dev tnx for the answer Simon

  • @jamesdowsett-cooper5347
    @jamesdowsett-cooper5347 2 года назад

    Hi Simon, thanks for all the great ideas, Any idea how to setup google auth with capacitor and ios in a nextjs app? I had issues with codetrix google auth plugin

    • @galaxies_dev
      @galaxies_dev  2 года назад

      No haven't done it in that combination, but what was the issue?

    • @jamesdowsett-cooper5347
      @jamesdowsett-cooper5347 2 года назад

      @@galaxies_dev well with next-auth you need to add the provider but I'm not sure how to integrate Google Auth plugin so that when Google Auth plugin authenticates a session can be created by next-auth similar to if I was using the next Auth Google provider.
      Any help on how to use next-auth with capacitor would be greatly appreciated. Tried capacitor browser also but no success

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

    Hello, i have problem.
    I successful run in android and ios but if i add url in capacitor.config to live reload i get this error 'Error: Could not connect to the server' in android studio and xcode.
    How to fix that? Thanks

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

    It seem like ionic reactjs already cover most important part, so I dont see a good reason to use nextjs with ionic. Am I missing something?

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

      If you come from Nextjs, that's the reason!

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

    ⚡ Error: The URL can’t be shown: Is this error simiply due to my newtork ? I' at a local coffee shop?

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

    hotreload not working..? :( its sowing blank white screen

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

    Nice video, Thank you

  • @nikolaskurnia7404
    @nikolaskurnia7404 2 года назад

    Is this also possible with Svelte Kit?

    • @galaxies_dev
      @galaxies_dev  2 года назад

      Check this out: twitter.com/Tommertomm/status/1585345804390531072

  • @arabhuntingadventures
    @arabhuntingadventures 2 года назад

    I’m on Windows, will xcode work there?

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

    Anyone running Next 13 and using the experimental app directory, steps in this video will not work with it. And Next moved the images property from the experimental flag. In next.config.js add:
    images: { unoptimized: true } instead of experimental: { images: { unoptimized: true } }

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

      Hi, did you manage to convert your next13 app using capacitor? If so could you share how ?

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

      Thank you

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

      ​@@abdulrahmanali5758did you find any leads for next js?

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

    How does one use capacitor with nextjs app dir?

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

      Working on a new tutorial about that! Anything else you would like to see that's causing problems?

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

      @@galaxies_dev pleasee we need this tutorial :))

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

      @@galaxies_dev I would like to see this tutorial, could you cover thing like authentication? maybe next auth or Supabase auth. Any idea when we can expect to see this tutorial?

  • @ivanilsonmartins_
    @ivanilsonmartins_ 2 года назад +1

  • @ollydix
    @ollydix 2 года назад

    We are really lacking an all in one web framework that allows us to deploy on Web/Desktop and Mobile with native navigations. Flutter can do this but it's not web or SSR.
    React Ionic & Capacitor are a fairly low quality options, they have janky iOS navigation animations, plus hundreds of bugs.
    Expo would have been a better option as it supports native navigation.

    • @galaxies_dev
      @galaxies_dev  2 года назад

      Not sure why Ionic is a "low quality option" while thousands of apps are built with it, but I agree that there is no one perfect framework for all of this yet.

  • @rezwansaki
    @rezwansaki 2 года назад

    how to build mobile app by nuxt js?

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

    How to export files to .apk file?

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

      You can use Android Studio or Gradle!

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

    only static content 😐😐
    what about SSR and more complex app 😢

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

    So why even use next if ionic and SSR are at each other's throat. These technologies clearly don't match well

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

    Hot Reload not works, using NUXT js

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

      Haven't worked with Nuxt yet, sorry!

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

      @@galaxies_dev im doing externally with "ngrok"

  • @Philson
    @Philson 2 года назад +3

    Wow. Seems like a MASSIVE headache to use Ionic with Nextjs.

    • @galaxies_dev
      @galaxies_dev  2 года назад

      Yeah adding Ionic isn’t easy, doesn’t work well with any of these tools. same with SvelteKit!

    • @arabhuntingadventures
      @arabhuntingadventures 2 года назад +1

      Yea and also i don’t think we need Next JS for building mobile apps even, Next JS is mostly used for SSR in normal webapps, better sticking to react ionic for mobile apps

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

      @@arabhuntingadventures I think this is more when you already have a nextjs and want to add a mobile app

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

    hey simon i got this error after i typed npx cap open android in android studio package android.content does not exist can you please help me