subtlegradient / next.ts-toy

Template repo for all my rando toy apps

With Expo TypeScript

This is a starter project for creating universal React apps with Next.js, Expo, and TypeScript.

💡 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 of react-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 running yarn next-expo customize.
• To use fonts and images, see the Expo docs.

Deploy your own

Deploy the example using Vercel (web only):

Deploy the native app to the App store and Play store using Expo deployment.

How to use

Using create-next-app

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-expo-typescript with-expo-typescript-app
# or
yarn create next-app --example with-expo-typescript with-expo-typescript-app

Running web

🚨 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).

Running native

• Install the Expo CLI npm i -g expo-cli.
• Start the Metro bundler with yarn ios or yarn android -- This runs expo 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.

Troubleshooting

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 }]], {
  // ...
})