reactnative-nextjs-template
reactnative-nextjs-template copied to clipboard
Build native apps (iOS/Android/Windows/macOS) and an SEO-optimized web app from the same React codebase
reactnative-nextjs-template
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.
Why is this awesome?
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.
Use cases
- 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 an API, powered by Next.js and Vercel serverless functions.
Todo list
- [X] Server-side rendering (SSR)
- [X] SEO: Semantic tags e.g. H1, H2, H3
- [X] SEO: Page metadata support
- [X] Header (from
react-native-elements
) - [X] Video player
- [x] Built-in REST API (
GET /api/test
) - [ ] Navigation
- [ ] Flexible CSS solution
- [ ] Font support
- [ ] SVG support
Demo
See reactnative-nextjs-template running on Vercel here.
Support this project
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:
Deploying
Setup and deploy your own project using this template with Vercel:
How to use
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
Modifying the app to your needs
Change app name
Do search/replace for reactnativenextjstemplate
to something else. Avoid hyphens/underscores because of iOS/Android bundle names.
Change name in public/manifest.json
Change port number
Do search/replace for “3005” to something else.
Read more
- Expo’s guide on Next.js: https://docs.expo.dev/guides/using-nextjs/
- @expo/next-adapter
- Code example: https://github.com/expo/examples/tree/master/with-nextjs
- Solito framework: https://solito.dev/ (awesome but uses it’s own components/syntax)
- create-universal-app (CUA): https://github.com/chen-rn/CUA