Can Next.js codes run on Wix Backend

Question:
I am new to Wix and coding as well (Javascript, Velo, React, Nextjs). I have written a basic app on App Inventor 2 (ai2) and would like to connect the frontend mobile app to Wix backend (Collections, Wix Members, Business Solutions etc). I have been researching (google, youtube) and found something like writing Next.js app connecting to Wix Backend. The questions are:

  1. Can i code Next.js/React in Wix Backend and calling it from my App Inventor 2 mobile frontend?
  2. When i run command in Wix IDE ā€œnpx create-next-app@latestā€ failed with error ENOENT: no such file or directory, mkdir ā€˜/home/node/.npmā€™. Can we install anything on Wix IDE?
  3. Sorry as i said i am still learning Wix and coding. I have done online training courses on Velo and youtube. But itā€™s getting TOO CONFUSING, the more i seek the more confused i am. Basically i just want to be able to connect my mobile app written in ai2 to access Wix Backends (Collections, Wix Members and Wix Business Solutions). Which would be my best approach?

Would really appreciate if someone can give me ā€œworking examplesā€ on how i can connect from my mobile ai2 app to Wix Backend collections. My main objectives are authentication via Wix Members and then able to query/create/update/delete Wix Collections. How can i achieve that?
Please helpā€¦i am very confused!..

Thank you for any help.

Hey! You can use nextJS and connect to Wix business solutions via our JavaScript SDK. You would not write NextJS code directly in a Wix or Wix Studio site, but rather maintain your nextJS repo, setup an Oauth app and connect it to Wix (CMS,ecomm, bookings, etc)

Hereā€™s a few things that may help you wrap your head around it!

A react-native repo connected to Wix Headless for a mobile example

A video on how to set up a new headless project with Oauth app

And finally, if you are still really stuck we have a headless channel in our Discord community to chat with other headless devs that is maintained by the headless team.

Hi Amandam,

Thank you so much for your guidance, response and help. What i donā€™t understand is how can mobile apps run React when Node is not installed on userā€™s mobile?
Sorry for the naive question as i really donā€™t have any coding experience for mobiles.
As i mentioned before, my main object are

  1. to have login authentication to Wix;
  2. Access Wix Business Collections apps and/or Wix Collections.

Also with the example " A [react-native repo connected to Wix Headless] for a mobile example", where should the codes be placed, On Wix Backend or Wix Public?

Any help or further examples from Mobile Frontend connecting to Wix Backend would be greatly appreciated.

Thank you.
Derek

Hey Derek,

Hereā€™s a simple alternative then. Handle the login and authentication using a WebViewer.
And then you can expose data from the CMS using http-functions, which you can fetch from your app using a Web component. Iā€™ve used these very methods and they work pretty well for me. You can try it out too, but for this you will need to know how to code using Velo.

1 Like

Thank you Pratham for your advice. Will look into it.
Do you have any experience with React and how they be run on mobile apps?

Appreciated your help.

As shown in the tutorial dropped by @amandam, you will have to deploy your React app on Netlify or similar alternatives. So it cannot work directly with AppInventor, but this might be able to act as a bridge between your site and app. However this method is pretty complex and I have not tried it before, since I was able to achieve it using the much simpler approach that I mentioned earlier.

1 Like

@Pratham
Thank you for your quick response!

Yes i found something about deploying using Netlify but it seems some cost involved for production.

Love to know your approached using Webviewer. Would you be able to share an example of aia file how you achieved it?
Any help would be much appreciated.

Thank you.

Hey Derek,

Since it is an ongoing project and still under development, feel free to share your email in my DM, I can share some of the details about that privately (Click on My Username > Message)