Have you ever thought of having a single codebase for your web and mobile apps?
I was recently tasked with a SPIKE ticket to research the gap analysis of getting our app to Google Play and App Store. What immediately popped up in my head was react-native. So I searched for popular frameworks that supported this. The top choice was Solito. It solved 2 things:
NextJS navigation on mobile
patterns to build cross-platform apps
The problem was I had to rewrite a lot of code to convert it to react-native-web to support native components.
So I asked around the team for some perspective. One suggested CapacitorJS by Ionic. It was the perfect solution for the requirement!
Basic setup with my NextJS app
basically, follow this guide https://capacitorjs.com/docs/getting-started
Few things to make your life easier
Use JDK 17 (this is the best version to use with Android to prevent Gradle build issues)
Use this guide to change your default version https://stackoverflow.com/a/24657630
Create an index.html file inside your /public dir that contains:
see the note here why you have to do this https://capacitorjs.com/docs/getting-started#add-capacitor-to-your-web-app
Common build errors with npx cap sync
if /out dir is missing, you have to update your next.config.js to include output: export instead of output: standalone
if Gradle build errors, check if you are using the correct JDK version
if iOS error, update your XCode
Conclusion
Easy, right? Just make sure your web app is responsive and it should just work smoothly. 🚀 Good luck, mates!
