NOTE: Work in progress until version is 1.0.0+
Build native apps (iOS/Android/Windows/macOS) and an SEO-optimized web app from the same React codebase, using React Native/Expo and Next.js
(Created with npx create-next-app -e with-expo [PROJECTNAME]
)
Note: this is my v5 boilerplate for React apps. See also my Next.js + Firebase boilerplate.
This allows you to build both a native app for iOS/Android/Windows/macOS/etc, as well as an SEO-optimized web app from same codebase.
- You want a same user experience in a native app and on the web.
- You want a shared codebase between a native app and a separate website.
- You want a shared repository for native app and its API, powered by Next.js and Vercel serverless functions.
- Server-side rendering (SSR)
- SEO: Semantic tags e.g. H1, H2, H3
- SEO: Page metadata support
- Header (from
react-native-elements
) - Video player
- Built-in REST API (
GET /api/test
) - Navigation
- Flexible CSS solution
- Font support
- SVG support
See reactnative-nextjs-template running on Vercel here.
Did you or your company find reactnative-nextjs-template
useful? Please consider giving a small donation, it helps me spend more time on open-source projects:
Setup and deploy your own project using this template with Vercel:
Note: If you set up your project using the Deploy button above, you only need to clone your own repo instead of this repository.
Clone this repository:
git clone https://github.com/tomsoderlund/reactnative-nextjs-template.git [MY_APP]
cd [MY_APP]
Remove the .git
folder since you want to create a new repository
rm -rf .git
Install dependencies:
yarn # or npm install
Start it in Next.js/web mode by:
yarn dev:next
…then navigate to http://localhost:3005/
Start Expo for native apps:
yarn dev
In production:
yarn build
yarn start
Do search/replace for reactnativenextjstemplate
to something else. Avoid hyphens/underscores because of iOS/Android bundle names.
Change name in public/manifest.json
Do search/replace for “3005” to something else.
- Expo’s guide on Next.js: https://docs.expo.dev/guides/using-nextjs/
- Solito framework: https://solito.dev/ (awesome but uses it’s own components/syntax)
- create-universal-app (CUA): https://github.com/chen-rn/CUA