96
Configure Next.js for cross platform development with Capacitor js
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!
Making Android, iOS and desktop apps with Next.js.
If you just want the code, you can visit
github.com/k4u5h4L/next-capacitor-demo
If you just want the code, you can visit
github.com/k4u5h4L/next-capacitor-demo
Well, it depends on you... Everythinig is a tradeoff and Next.js + Capacitor isn't perfect either.
getServerSideProps
. Sadly, they won't work with capacitor. Next.js wasn't really meant to be used for mobile development.Let's get started shall we!
yarn
here but you can use npm
as well.java -version
yarn create next-app next-capacitor-app
yarn add @capacitor/core @capacitor/cli @capacitor/android @capacitor/ios
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
We're setting the
web-dir
as out
because when we export assets it'll be there in the out
directory.npx cap add android
npx cap add ios
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>
)
}
Now, let's export the static assets from next!
yarn run build && npx next export
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
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
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
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
.
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"
}
}
Now with this set up, run
yarn run build
npx next export
npx cap sync
Now you can run the development server given by next.js
yarn dev
And now with the dev server running, run your app on your physical device as well.
npx cap run
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.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
To run your app,
npx cap open electron
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!
96