Capacitor with React & Next.js?

[theagentalpha]

Has anyone tried using Capacitor with a React & Next.js app? I created a static version of my app from Next and used that for cap to pull into Xcode. The first page of my app loads fine but when I click to go to the second page, it doesn't actually advance. I looked at the Safari debugger and I can see that it correctly fires off API calls and gets results but the UI doesn't change past my loader. There are also no errors in the Safari console or Xcode. Also if run the static version of my app on localhost and open it in the Simulator's Safari browser, the app does work.

So I imagine it's some quirk about how Capacitor is pulling my Next app into Xcode but since I'm not getting any sort of error, I'm not sure where to look. Any ideas from anyone who might have tried this?

[theagentalpha]

I also did a little POC iOS app where I loaded the same static next files into the project and then served them in the Web View. I didn't have the UI issue. So it's something about how Capacitor is trying to bring them in

[mlynch]

Yep! People are starting to use the two projects together. Here are some interesting blog posts about this:

https://ironeko.com/posts/getting-started-with-capacitor-using-next-js-on-ios
https://ironeko.com/posts/getting-started-with-capacitor-using-next-js

Also expect some examples and info from us on how to use it in the coming months!

[ivanjeremic]

We need some official Nextjs support, please

[realmichaelye]

+1

[jcesarmobile]

There was a next router issue that got fixed recently, make sure you are using latest version. It prevented apps from navigating when loaded from a custom protocol, so looks similar to your problem.

[woile]

Hello people, anyone has some more data on this?
I was wondering, do you think using next export would be a good fit with capactior?

[mlynch]

Yes! Works well. See my work in progress here: https://twitter.com/maxlynch/status/1348369544344195080?s=20

Stay tuned for a blog with more info!

[woile]

Wow, that's awesome news! I'm using that exact stack.
Are you planning on writing some docs about it? I could give some feedback!
Thanks again 💪🏻

[woile]

Here's the blog by @mlynch in case people get here: https://capacitorjs.com/blog/mobile-apps-with-tailwind-css-nextjs-ionic-and-capacitor

[realmichaelye]

@mlynch ^This doesn't work for me, gives a an invalid hook call error

[kiily]

Hey guys, I am trying to do something similar to this but would like to point the webview to our hosted app. Apparently, this used to be possible with Cordova and should be with capacitor, I am not 100% sure where to start but was wondering if anyone had some experience with it?

What would you suggest for a team that cannot move from SSR (at least right now) but would like to make use of Capacitor?

[mlynch]

Yes, it's possible. See the server.url configuration option here: https://capacitorjs.com/docs/config

[rosswaycaster]

@mlynch do you know if Apple will accept apps that point to a website?

[jaxomlotus]

@rosswaycaster did you ever get a reply to this? My understanding is that they do not accept wrapped apps.

[Sleepful]

@rosswaycaster @jaxomlotus afaik apple can't really tell how you coded your app (you submit the compiled project), so the way that you would flop is by failing to make your app feel like an mobile app. This seems like a matter of dedicating enough effort into making it nice. Of course if the app looks like a tiny website it will get bounced. I don't really have experience with this but it seems logical.

[Sleepful]

the server.url does include this comment in the code tho... This is not intended for use in production