Capacitor with Nextjs?
Unanswered
British Shorthair posted this in #help-forum
British ShorthairOP
Hello there!
Is there a recommended way to use Capacitor with Nextjs?
I have read some articles online, but they are all suggesting that, if you want to use Capacitor, you have to build the whole app as a static export (no server side rendering, no server actions, no server components).
I understand the reason for this (the app has to be kind of a SPA in order to be bundled into a native app), but I don't understand why cannot we do that conditionally.
I mean, I do not want to change my whole app to a SPA, as in desktop it's working quite nicely and I don't want to make such a dramatic change,
...but I am ok with conditionally (like...with a env variable that I can set whenever I want to build the native apps) make it export an SPA.
Like... for example if "MOBILE_BUILD" is set to true, do the following:
- Instead of server page components that fetch data on the server, pass a page component that is a client component and that fetches data with react query
- Completely avoid server actions
- set next.config to export a static build
But I MUST be missing something, because apparently everybody is advocating for the idea of "you need to change the whole app to and SPA -unconditionally- if you want to build native mobile apps with Capacitor".
What is wrong with this approach? What am I missing?
Is there a recommended way to use Capacitor with Nextjs?
I have read some articles online, but they are all suggesting that, if you want to use Capacitor, you have to build the whole app as a static export (no server side rendering, no server actions, no server components).
I understand the reason for this (the app has to be kind of a SPA in order to be bundled into a native app), but I don't understand why cannot we do that conditionally.
I mean, I do not want to change my whole app to a SPA, as in desktop it's working quite nicely and I don't want to make such a dramatic change,
...but I am ok with conditionally (like...with a env variable that I can set whenever I want to build the native apps) make it export an SPA.
Like... for example if "MOBILE_BUILD" is set to true, do the following:
- Instead of server page components that fetch data on the server, pass a page component that is a client component and that fetches data with react query
- Completely avoid server actions
- set next.config to export a static build
But I MUST be missing something, because apparently everybody is advocating for the idea of "you need to change the whole app to and SPA -unconditionally- if you want to build native mobile apps with Capacitor".
What is wrong with this approach? What am I missing?