Building a Native Mobile App with Next.js and Capacitor

⚡️ Just getting started?

#############################

👨‍💻 Want to read instead of watch?

🤷‍♂️ Want more Ionic tutorials?

#############################

❤️ You can also find me on:

Or join the Simonics Facebook group:

#############################

00:00 Introduction
01:21 About Capacitor
13:30 Using Capacitor Plugins
29:36 Outro

#nextjs #react #webdevelopment

[galaxies_dev]

Want to learn more about web development and native mobile apps? That's great!

[RuanHuysen]

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

[notevoyadarminombre]

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

[catchup]

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

[LilImpulsive]

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

[MartinRatinaud]

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

[jkbrodotdev]

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 } }

[ryanhopper-lowe]

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???

[seanknowles]

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

[AbubakarAttockOffice]

only static content 😐😐

what about SSR and more complex app 😢

[impairedmaps]

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 !

[a-yo]

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

[kibaofficial]

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

[joseysusamigos]

now only nuxt and sveltekit with capacitor are missing

[جوادجیتی]

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

[timlambe]

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

[Philson]

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

[brianronin]

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

[AlexanderRich]

Cool. This is exactly what I was looking for!

[AzirChai]

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