Next.js for Expo & React Native
Customizable, fast, and lightweight drop-in support for Next.js on native platforms
Visit https://pilot.waveplay.dev/docs to view the full documentation.
Create a new Pilot.js app via our interactive CLI:
npx create-pilot-app
This will guide you through a short customization process and create a fully working template.
Install the package:
npm install @waveplay/pilot
We assume you already have a working project with Expo and Next.js. If not, follow their respective guides:
You can either let Pilot.js manage your app's entry or you can use the <PilotArea>
component directly. The latter is useful if you need additional customization.
Edit your app.json
to include the following:
{
"expo": {
"entryPoint": "node_modules/@waveplay/pilot/AppEntry.js"
}
}
Update your App.js
entry component to render PilotArea
.
import { loadEnv } from '@waveplay/pilot/env'
import { PilotArea } from '@waveplay/pilot/ui'
// Loads public environment variables
loadEnv()
const App = () => {
// ... your code
return (
<PilotArea/>
)
}
export default App
You're now ready to use Pilot.js! Use it like you would use Next.js.
Pilot.js relies on the built-in CLI to detect pages and routes.
The build
command will prepare your project. You must run this before you can use the start
command or routing may not work.
pilot build
The dev
command will start a development server on native + web.
pilot dev
This will:
- Start a Next.js development server
- Build Pilot.js & link to your local Next.js server
- Start an Expo development server
You can use Pilot.js the same way as Next.js, except it now also works on React Native and Expo projects!
// const router = useRouter();
const pilot = usePilot();
// router.push('/dashboard');
pilot.fly('/dashboard'); // or pilot.push('/dashboard');
Feature | Support | Description |
---|---|---|
/_app |
✅ | Optional app wrapper is applied on pages when the _app route is registered. |
/404 |
✅ | Rendered when page route cannot be found or when notFound: true is returned while loading props. |
/500 |
✅ | Rendered when an error is thrown while loading props. |
/pages |
✅ | Automatically finds routes from /pages or /src/pages directory via pilot build command. |
getServerSideProps |
✅ | Calls this function and delegates props if it exists when loading new route. |
getStaticProps |
✅ | Calls this function and delegates props if it exists when loading new route. May be skipped if props were cached. |
i18n |
✅ | Supports defaultLocale and locales from next.config.js i18n fields. locale is passed as a variable in your getProps functions. Learn more. |
revalidate |
✅ | Uses this field returned by your getStaticProps function to skip future loading for the time specified. |
.env |
✅ | Environment variables are loaded during pilot build . This follows the same pattern and load order as Next.js. |
context |
🕒 | context is passed to getServerSideProps and getStaticProps functions. If haven't set up Web Props, req and res will be empty objects.Fields not supported yet: preview , previewData |
<Link> |
🕒 | Supports most functionality that next/link provides.Props not supported yet: passHref , prefetch , replace , scroll , shallow |
redirects |
🕒 | Redirects are supported by returning a redirect object from your props functions.Redirects defined in next.config.js are not supported yet. |
useRouter |
🕒 | Supports most functionality using the usePilot() hook.Fields not supported yet: basePath , domainLocales , isFallback , isReady , isPreview .Functions not supported yet: beforePopState() , events() , prefetch() , replace() |
/api |
❌ | Not supported yet. |
getStaticPaths |
❌ | Not supported yet. |
middleware |
❌ | Not supported yet. |
rewrites |
❌ | Not supported yet. |
withRouter |
❌ | Not supported yet. |
appDir |
❌ | Not supported yet. |
serverComponents |
❌ | Not supported yet. |
next export |
❌ | Not supported yet. |
Note: If a feature is not in the table above, that likely means there are no plans to support it or we may have missed it. However, you can still use unsupported features in the web environment.
Native apps work much differently than a server which means some features may not be possible to support. Please open an issue if you'd like to see a feature added.
This project was originally developed as an internal router for WavePlay.
The MIT License.