This is a starter project for creating universal React apps with Next.js and Expo.
💡 For the most updated info, see the Expo + Next.js Docs!
- Next.js cannot be used for SSR in your native app.
- The native bundle is built using the Metro bundler and may not have the same level of optimization as the web bundle which is compiled using the Next.js Webpack configuration.
- Expo transpiles
react-native-web
packages by default to enable the use ofreact-native
in a browser or Node.js environment. - All Expo packages work in the browser. If you experience issues using them in a Node environment, please report them here: Expo issues.
- Most community
react-native-*
packages do not support web, please refer to reactnative.directory for a list of web compatible packages. - Eject the
pages/_document
component by runningyarn next-expo customize
. - To use fonts and images, see the Expo docs.
Deploy the example using Vercel (web only):
Deploy the native app to the App store and Play store using Expo deployment.
Execute create-next-app
with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example with-expo with-expo-app
# or
yarn create next-app --example with-expo with-expo-app
# or
pnpm create next-app --example with-expo with-expo-app
🚨 Using default Expo web with Next.js is not supported.
- Start the Next.js project with
yarn dev
(yarn next dev
).
Deploy the web app to the cloud with Vercel (Documentation).
- Install the Expo CLI
npm i -g expo-cli
. - Start the Metro bundler with
yarn ios
oryarn android
-- This runsexpo start
with the Expo CLI. - You can run the mobile app using the Expo client app, or by running
yarn eject
and building the project manually (this requires a macbook for iOS).
Deploy the native app to the App store and Play store using Expo deployment.
You may find that certain packages like @ui-kitten/components
do not work in the browser. This is because they need to be transpiled by Next.js, you can fix this by doing the following:
- Install the following:
yarn add -D next-compose-plugins next-transpile-modules
- Modify the Next.js config
next.config.js
:
const { withExpo } = require('@expo/next-adapter')
const withPlugins = require('next-compose-plugins')
const withTM = require('next-transpile-modules')([
// Add the name of your package here...
'@ui-kitten/components',
])
module.exports = withPlugins([withTM, [withExpo, { projectRoot: __dirname }]], {
// ...
})