Building a Native Mobile App with Next.js and Capacitor

preview_player
Показать описание


⚡️ 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
Рекомендации по теме
Комментарии
Автор

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

galaxies_dev
Автор

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

RuanHuysen
Автор

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

notevoyadarminombre
Автор

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

catchup
Автор

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

LilImpulsive
Автор

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

MartinRatinaud
Автор

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

jkbrodotdev
Автор

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

ryanhopper-lowe
Автор

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

seanknowles
Автор

only static content 😐😐

what about SSR and more complex app 😢

AbubakarAttockOffice
Автор

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 !

impairedmaps
Автор

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

a-yo
Автор

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

kibaofficial
Автор

now only nuxt and sveltekit with capacitor are missing

joseysusamigos
Автор

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

جوادجیتی
Автор

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

timlambe
Автор

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

Philson
Автор

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

brianronin
Автор

Cool. This is exactly what I was looking for!

AlexanderRich
Автор

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

AzirChai