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 🚀
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 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
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???
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...
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...
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
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.
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.
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?
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
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
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 } }
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.
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.
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
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 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
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 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.
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
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
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, },
@@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?
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 🚀
Dude... I was literally going to copy and reformat my entire NextJS codebase into Ionic React... then you made this!
Haha happy to help Ruan!
For the image optimization problem, I used the chakra UI Image component and it works just fine for me.
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 !
can you please elaborate on this @impairedmaps?
@@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
This is awesome! Maximizing code reusability is a must if you have a small team or you are a solo developer!
Totally agree Juan!
This is not no code, it's not low code, it's kind of medium code.
@@alastairtheduke aayen
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
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???
Agreed! A video on this would be helpful for understanding the use cases of the different routing designs for Capacitor and NextJs
Quick question, about .env variables data, how would you handle those? Or insert Those? Nice video !!
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...
hi, same problem here, do you solved? or this only work for static sites?
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`.
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...
I used Chakra UI as my UI library and used its image component which works just fine for me. Maybe you should try that.
Cool. This is exactly what I was looking for!
Glad I could help!
depois dessa já posso colocar no meu curriculo "capacitorjs"
Great video 😃
Does this still work if you have a fullstack NextJS WebApp with database connected?
Well the problem are the cloud functions or API routes, you don't really have that in a local app!
@@galaxies_dev thanks. do you have any advice, how i could solve this without recoding the backend ?
@@timlambe8837did you find any answer for this.?
now only nuxt and sveltekit with capacitor are missing
i love it
please make video and big project with this Technology
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
is there also a way to do it with the app directory instead of the pages?
Thank you Simon! Awesome stuff!!!
Glad you liked it!
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?
No there would be no API as you just create a static build of your Next project!
@@galaxies_devI couldn't get, are you saying that we can't build an Android app from the next js dynamic web application?
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.
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
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.
It's complicated, but here's a post I made about that topic with Angular: devdactic.com/setup-deep-links-capacitor
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?
There is really no best - every approach has pros and cons!
keep up the good work!
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
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
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 } }
Hi, did you manage to convert your next13 app using capacitor? If so could you share how ?
Thank you
@@abdulrahmanali5758did you find any leads for next js?
Do i need to do anything as for my api routes? With nextjs app router
AAAAlrightttt! Thank you for another video as great asssssss you.
Any time!
⚡ Error: The URL can’t be shown: Is this error simiply due to my newtork ? I' at a local coffee shop?
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.
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.
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?
If you come from Nextjs, that's the reason!
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
I believe my local ip address is correct
hotreload not working..? :( its sowing blank white screen
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
No haven't done it in that combination, but what was the issue?
@@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
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
No haven't taken a look at that problem yet - is it difficult?
@@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.
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
Yeah I have seen other projects with nx, think it could work but haven't done so yet.
@@galaxies_dev tnx for the answer Simon
Wow. Seems like a MASSIVE headache to use Ionic with Nextjs.
Yeah adding Ionic isn’t easy, doesn’t work well with any of these tools. same with SvelteKit!
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
@@arabhuntingadventures I think this is more when you already have a nextjs and want to add a mobile app
Thank you so much for this video tutorial! It has been very informative and helpful to me. Keep up the great content!
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, },
Nice video, Thank you
Glad you liked it!
only static content 😐😐
what about SSR and more complex app 😢
So why even use next if ionic and SSR are at each other's throat. These technologies clearly don't match well
I’m on Windows, will xcode work there?
No
Is this also possible with Svelte Kit?
Check this out: twitter.com/Tommertomm/status/1585345804390531072
how to build mobile app by nuxt js?
Haven’t used Nuxt so far :/
How does one use capacitor with nextjs app dir?
Working on a new tutorial about that! Anything else you would like to see that's causing problems?
@@galaxies_dev pleasee we need this tutorial :))
@@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?
Hot Reload not works, using NUXT js
Haven't worked with Nuxt yet, sorry!
@@galaxies_dev im doing externally with "ngrok"
How to export files to .apk file?
You can use Android Studio or Gradle!
🙌
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