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...
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.
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 } }
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
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
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.
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, },
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.
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
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
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
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.
@@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?
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
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!
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
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 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
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?
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
Cool. This is exactly what I was looking for!
Glad I could help!
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.
i love it
please make video and big project with this Technology
Quick question, about .env variables data, how would you handle those? Or insert Those? Nice video !!
keep up the good work!
Thank you Simon! Awesome stuff!!!
Glad you liked it!
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
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.?
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?
is there also a way to do it with the app directory instead of the pages?
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!
now only nuxt and sveltekit with capacitor are missing
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?
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!
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
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`.
Nice video, Thank you
Glad you liked it!
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
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
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
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!
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, },
hotreload not working..? :( its sowing blank white screen
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.
⚡ Error: The URL can’t be shown: Is this error simiply due to my newtork ? I' at a local coffee shop?
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
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
@@mikemajdalani2 I think this is more when you already have a nextjs and want to add a mobile app
I’m on Windows, will xcode work there?
No
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
So why even use next if ionic and SSR are at each other's throat. These technologies clearly don't match well
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.
only static content 😐😐
what about SSR and more complex app 😢
Is this also possible with Svelte Kit?
Check this out: twitter.com/Tommertomm/status/1585345804390531072
🙌
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?
how to build mobile app by nuxt js?
Haven’t used Nuxt so far :/
How to export files to .apk file?
You can use Android Studio or Gradle!
Hot Reload not works, using NUXT js
Haven't worked with Nuxt yet, sorry!
@@galaxies_dev im doing externally with "ngrok"
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