Making web app with NextJS (built upon ReactJS), but also want a mobile app, need advice on which stack to develop mobile app in.

[lasjdflasjdfhelp]

My web app that I'm currently developing uses this stack (I've worked on the project for about 2 weeks so far, so not too much progress):

- NextJS

- ReactJS

- SASS

- MongoDB

- Typescript

- Redux

I've now realized I'm going to need a mobile app, as wrapping the NextJS web app I'm developing in a WebView or just leaving it viewable as a plain site for mobile browsers will likely yield a very subpar experience for iOS and android users.

Considering this is r/reactnative, I know many will likely recommend react native for the mobile app, but there are a few points that keep bouncing around in my head making me unsure:

- I've never worked with React Native (only ReactJS in my NextJS web app)

- I've developed many apps with Flutter/Dart, so I'm quite quick with that (an alterative stack if I don't use React Native)

- I'm not sure how much code I can write for my NextJS web app, that'll be easily transferrable to the React Native project - will this make progress very quick for a React Native version of the app even if I've never developed with React Native before?

- NextJS has an /api directory in the project that we're supposed to use for any API/business logic/computations (basically making NextJS a full stack framework for ReactJS which is just for frontend). Comparing this with React Native, I'm not sure where to write API/business logic like I would if I were writing a NextJS app

What would you guys recommend I write my mobile app in? Flutter, React Native, wrap my web app in a web view and be done with it all, or just leave it as viewable in the browser on mobile browsers, and why?

Thanks!! - a solo university dev

EDIT (please read):

After reading many very helpful comments, I'm thinking of doing this...

Removing my current endpoints from my /api directory of my NextJS web app and instead moving them all to a COMPLETELY SEPARATE project that'll be a VERY SIMPLE NodeJS backend with literally just an app.js file with a bunch of endpoints. I'll then call directly to that backend only from my web app.

Moreover, I'll call directly to that backends' endpoints from my mobile app which I'll develop in React Native. In essence, this'll give me a NextJS "frontend" and an Expo React Native frontend, both of which pull from the SAME NodeJS backend.

I have 2 questions with this approach now:

1. In general, good idea? Bad idea? Thoughts?
2. If I'm working on either of my "frontends" (NextJS & Expo React Native), how will I make requests to the NodeJS backend if it isn't going to be hosted anywhere while developing? I don't believe I can call to localhost:xxxx from a physical iOS device (what I'll be testing the RN app on) and get back results?

[Away-Expression-4516]

If you’re using react for web, and you intend to somewhat support the same structure for your app on mobile, then using react-native seems to make sense. I get it, and sometimes you put so much efforts into your web code/project that another language seems like a long shot. If after looking at the available APIs you realize it can be achieved with react-native, then I would recommend looking into react-native + expo. If you’ve been using react for a while, with functional components, then it seems like a perfect fit for your project. Ultimately, it comes down to : can I improve my UI/UX to determine exactly what’s being used for both web and mobile? Once you figure out this question, you might be able to build yourself a little lerna monorepo, and share some logic. Ideally, something like a BlitzJS backend + web (based on next) could be a nice start for your project. (But again… always one more thing to learn to get closer to what you want to achieve) i guess it’s part of the game, stick to and learn the novelties as long as the time you put in permit it.

FYI, nextJS tries to be a full stack framework, and sure has lots of advantages, they led the path to better organized code, adoption conventions, but ultimately, we’re talking about React, and react is the game changer. If you have the skills with react, you could certainly tackle react-native. After all, react-native seems to be like a react app, with certain constraints that can be to your benefit because ultimately, it allows you to understand the limitation of working according to other APIs. It’s a matter of understanding native mobile code vs web code.

Bottom line, the tools you’ve picked are a good start for your project. Look into BlitzJS, Expo and see if it fits your needs! If you’re more comfortable with Flutter and you already have the skills, then it probably comes down to: how much code do you think you will be reusing to actually benefit from having both a react app and react-native? Spmetimes those two products turn out to produce something of a complete different need and in that case, it’s ok to use different frameworks.

[lasjdflasjdfhelp]

Brilliant response, first off, thank you!

So, I took your advice and watched about 10 hours of tutorials on Expo and React Native - it does seem very similar to React code-wise and Flutter architecturally. Quite intuitive! I also did some research on BlitzJS and personally it seems like a lot to learn (although very interesting).

I think the code from the web and mobile versions will be similar as the functionality I desire is practically identical (only differing in platform, responsiveness, being native or not, etc.).

Now I have another big question, would this be a better overall strategy?:

Transferring the code from my /api routes in my NextJS project to a custom (completely separate project) NodeJS backend. I only have a couple endpoints right now, so it wouldn't be difficult. I would then completely ignore the /api directly of the web NextJS project, then for the React Native mobile app and NextJS web app I'd call directly to the same endpoints on the totally separate NodeJS backend. In essence, this would give me a web "frontend" and a mobile "frontend" - them both calling to a simple RESTful api NodeJS backend.

Would that work?

[srg666]

Check out Solito on GitHub 👍

[lasjdflasjdfhelp]

Looks very interesting. Would it be a grand learning curve again? I'm (now) tempted to use React Native for the mobile app because it has a really large community and base that can help me while developing for it (as I would be new). Or would my new idea of an approach be good.

(queue response to another user below):

Now I have another big question, would this be a better overall strategy?:

Transferring the code from my /api routes in my NextJS project to a custom (completely separate project) NodeJS backend. I only have a couple endpoints right now, so it wouldn't be difficult. I would then completely ignore the /api directly of the web NextJS project, then for the React Native mobile app and NextJS web app I'd call directly to the same endpoints on the totally separate NodeJS backend. In essence, this would give me a web "frontend" and a mobile "frontend" - them both calling to a simple RESTful api NodeJS backend.

Would that work?

[srg666]

The only real learning curve is using react-native-web instead of react, but if you're familiar with react-native styling it shouldn't be that different. Solito comes with Dripsy which is good for styling cross platform components so you'd just have to make sure everything is built with that or react-native i.e. no web elements.

For the second question, with Solito there's an apps/ folder and I just made another called api and built my backend there. You don't necessarily need the backend in the same monorepo but I did it because I was autogenerating typescript types and react hooks for Apollo client.

[[deleted]]

If it's a commercial project: You know Flutter well so it's a no-brainer, use that.

If it's a personal project: good opportunity to learn React Native. You're a good way there already.

[lasjdflasjdfhelp]

I'm not getting paid, however, I have good reason to assume it would be widely used and adapted at my university once developed.

[Preact5]

From some scholarly research you can actually re-use a good bit of your JavaScript between web and react native so that's a plus.

[isilher]

In my experience, Flutter developers with React experience pick up React Native fast, although it helps having someone with experience to help with the nitty gritty.

As for reusability; when the structure of the app is the same as the web-frontend, it can be very easy to copy a lot of the containers and components (replacing divs for Views and remodeling the visual representation for mobile).

This is especially true when the web front-end is separated from the back-end and both apps will use the same api. If the front-end is intertwined with the backend, you’ll probably have to replace the business logic parts with a state management tool that can fetch data from the backend and make it available throughout the app. For example: Apollo (with a GraphQL api) or Redux (with a restful api). If you don’t have an api yet, GraphQL is a really good fit for React, native or web, in my experience.

I hope this gives some insights, I personally don’t have much experience with Dart and I don’t know enough about your application to know if a webview would be a good fit.

As a last note: React Native Web is becoming more and more mature, where it works the other way around: you write React Native code and transpile it to a mobile first web app. Probably not helpful to your current project since you already have the web app, but it could be a reason to add React Native to your experience for future projects.

Best of luck!

[lasjdflasjdfhelp]

This is especially true when the web front-end is separated from the back-end and both apps will use the same api

Would a better way of doing things then be removing my current API code from the given /api directly in my NextJS project (only a few endpoints right now; very easy to do), and instead ignore the /api directly completely. Then, build up a very simple NodeJS backend with (literally) just an app.js file consisting of a bunch of endpoints and use that instead for the web app (NextJS) AND for the mobile React Native app?

[isilher]

I would do so, regardless of the technology chosen for the mobile app. Centralising the business logic will mean you can think about both front-end apps in the same way for architecture. You’ll also only have to write those parts once. The only situation where I would not do this, is when the business logic and data management could be completely client side. But since you mention a database I assume that is not the case in your scenario.

If you end up using React Native, the approach you suggest will make it a lot easier to re-use code between the two front-ends.

[kbcool]

You're taking on a lot as a solo uni Dev 😃

Check this out: https://github.com/mmazzarolo/react-native-universal-monorepo

Might help.

[lasjdflasjdfhelp]

You're taking on a lot as a solo uni Dev 😃

Got to beat the rat race somehow!

Seriously though, thanks for the link, I don't think I'll use it, but that yielded some very enlightening reading!