How to create a mobile application using Next JS

How to convert your Next JS application to Android and iOS in 5 clicks

With a real example, this tutorial will show you how to transform your web application developed in Next JS to iOS or Android using Capacitor. In my case, I have the following application:

• Database → MongoDB
• Backend → NodeJS / Express. Deployed in AWS.
• Frontend → React & Next JS. Deployed on Netlify.

In this tutorial, we will create both iOS and Android apps from the Frontend, as this app will connect to the Backend directly. So, the APK that we will develop will only contain the Frontend.

INSTALL CAPACITOR

To carry out this example, we need to have our Next JS application finished, and we only need to install Capacitor.

The Capacitor CLI requires NodeJS >=12.4.0. If you don’t have this version, you can update Node or download a new version using NVM. If this is your case, you can follow the following steps: https://heynode.com/tutorial/install-nodejs-locally-nvm/

Once we have NNode updated at least at 12.4.0, we can install Capacitor. To do that, we need to run the following commands:

cd frontProject

npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android

npx cap init --web-dir=out

The CLI will ask you for information about the project you are developing. My application is called “MyRealCode”, so I chose “myrealcode” as the name of my app and “com.myrealcode” as my Package ID (reverse domain name notation). If your application is called app.example.com, the Package ID should be com.example.app. They will also ask you to create an Ionic account and share anonymous data. In my case, I clicked on “no”.

Creating Capacitor Config File

After completing this step, you should have installed capacitor dependencies in the…