DEV Community

Cover image for Configure Next.js for cross platform development with Capacitor js
Kaushal
Kaushal

Posted on

Configure Next.js for cross platform development with Capacitor js

#nextjs #mobile #webdev #react

Ever wanted to make an mobile app but never wanted to handle multiple codebases?

Well with Next.js and capacitor you can!

Next.js has gotten really popular over the days, and much of it is justified. It is an absolute joy to work with and provides with an amazing developer experience.

Today I'll be telling you how to build a mobile app with the same codebase as your next.js application and run on in mobile devices as a native app! Also a bonus section on how to use it as a desktop app as well!

tl;dr

Making Android, iOS and desktop apps with Next.js.
If you just want the code, you can visit
github.com/k4u5h4L/next-capacitor-demo

Should you use it in production?

Well, it depends on you... Everythinig is a tradeoff and Next.js + Capacitor isn't perfect either.

Advantages:

  • Ease of maintaining just one codebase for both your web and mobile apps.
  • You don't have to leave your beloved Next.js and React ecosystem.
  • Makes more business sense to use a cross platform app.

Disadvantages:

  • Some features native to Next.js can't be used in a mobile or desktop app. So project changes need to be done.
  • Performance may take a hit.
  • The project is not yet mature and is still pretty new, although very exciting.

Things to consider

  • If you're used to Next.js, you'd have used its server side rendering features, like getServerSideProps. Sadly, they won't work with capacitor. Next.js wasn't really meant to be used for mobile development.
  • For live reload your laptop/desktop and phone need to be connected via WiFi, at least if you're following this article.

Let's get started shall we!

Prerequisites:

  • You need to have Node.js installed.
  • Any nodejs package manager. I'm using yarn here but you can use npm as well.
  • A physical mobile device with USB debugging turned on connected to your system
  • Java installed. Preferably version 8. This is to build your app for android. Check version by running 
java -version
Enter fullscreen mode Exit fullscreen mode

Enough talk, let's get to it!

  • Let's initialize a new Next.js project. Run 
yarn create next-app next-capacitor-app
Enter fullscreen mode Exit fullscreen mode
  • After everything is downloaded, let's install capacitor in our project. 
yarn add @capacitor/core @capacitor/cli @capacitor/android @capacitor/ios
Enter fullscreen mode Exit fullscreen mode
  • After installing the dependencies, let's initialize capacitor. 

npx cap init next-capacitor-app com.nextcap.app --web-dir=out

# The format as per capacitor docs
# npx cap init [name] [id] --web-dir=build
Enter fullscreen mode Exit fullscreen mode

We're setting the web-dir as out because when we export assets it'll be there in the out directory.

  • Install the native platform you're targetting 
npx cap add android
npx cap add ios
Enter fullscreen mode Exit fullscreen mode

Now you should be up and running with it. Go to your pages/index.js and edit it to get a basic page.

import React from 'react'

export default function Home() {
  return (
    <div>
      <h1>
        Hey there!
      </h1>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Now, let's export the static assets from next!

yarn run build && npx next export
Enter fullscreen mode Exit fullscreen mode

pro tip: You can add the next export command to your scripts section in your package.json.

Now, sync your next.js assets with android and ios platforms

npx cap sync
Enter fullscreen mode Exit fullscreen mode

After this, connect your physical device run the app. Check if the phone is recognised by adb first.

adb devices

# if a device appears, run the next command.
# else accept a pop up if it appears on your device

npx cap run
Enter fullscreen mode Exit fullscreen mode

Now you should see the app installed on your phone and you can interact with it just like any other app!

But wait, we forgot one thing. While development, live changes won't work. You'll need to build, export and run everytime. That's very hectic, so let's start up live reload now!

When you ran npx cap init [***], a capacitor.config.json file will be created in the root of your project. Let's go ahead and edit it so that we can add a server for live reload!

To get the IP address of your system, run

ifconfig
Enter fullscreen mode Exit fullscreen mode

or any other equivalent command depending on your OS. I use Arch Linux btw, so ifconfig works fine. If you're on windows, you can try running ipconfig.

ifconfig-output

That will be your local network IP. Mine is 192.168.1.9. So I'll be using that.

In your capacitor.config.json, add this:

{
    "server": {
        "url": "http://192.168.1.9:3000"
    }
}
Enter fullscreen mode Exit fullscreen mode

Now with this set up, run

yarn run build
npx next export

npx cap sync
Enter fullscreen mode Exit fullscreen mode

Now you can run the development server given by next.js

yarn dev
Enter fullscreen mode Exit fullscreen mode

And now with the dev server running, run your app on your physical device as well.

npx cap run
Enter fullscreen mode Exit fullscreen mode

Great! You now have live reload with your app! Just remember to remove the server config from capacitor.config.json before building your release APK.

Bonus section

Congrats if you've made it this far! Now we will build the app to work with electron.js as well for desktop apps!

Add and install electron platform for capacitor

yarn add @capacitor-community/electron
npx cap add electron
npx cap sync
Enter fullscreen mode Exit fullscreen mode

To run your app,

npx cap open electron
Enter fullscreen mode Exit fullscreen mode

Now enjoy life with your Next.js codebase spanning over the Web, Android, iOS, Windows, MacOS and Linux.

Well, that's about it. Hope this article helped y'all. Cheers!

Oldest comments (1)

Collapse
 
mxro profile image
Max Rohde •

Great article! Thank you for putting this together. Are there any limitations in using Next.js routes for navigation?

Read next

husain01 profile image

Securing Next.js Applications with Robust CSP Headers

Husain Bhagat -

redbeardjunior profile image

Create a simple search bar with checkboxes

RedbeardJunior -

sariah profile image

Top 5 UI Component Libraries for React.js

Sariah -

vishnusatheesh profile image

Controlled and Uncontrolled components in react

Vishnu Satheesh -