This monorepo is a blank(ish) starter for an Expo + Next.js app

Last update: Jul 31, 2022

Blank Solito Example Monorepo πŸ•΄

npx [email protected] my-solito-app

πŸ‘Ύ View the website

⚑️ Instantly clone & deploy

Deploy with Vercel

πŸ”¦ About

This monorepo is a blank(ish) starter for an Expo + Next.js app.

While it's pretty barebones, it does a lot of the annoying config for you. The folder structure is opinionated, based on my long experience building for this stack.

πŸ“¦ Included packages

  • solito for cross-platform navigation
  • moti for animations
  • dripsy for theming/design (you can bring your own, too)
  • Expo SDK 44
  • Next.js 12
  • React Navigation 6

πŸ—‚ Folder layout

  • apps entry points for each app

    • expo
    • next
  • packages shared packages across apps

    • app you'll be importing most files from app/
      • features (don't use a screens folder. organize by feature.)
      • provider (all the providers that wrap the app, and some no-ops for Web.)
      • navigation Next.js has a pages/ folder. React Native doesn't. This folder contains navigation-related code for RN. You may use it for any navigation code, such as custom links.

You can add other folders inside of packages/ if you know what you're doing and have a good reason to.

🏁 Start the app

  • Install dependencies: yarn

  • Next.js local dev: yarn web

    • Runs yarn next
  • Expo local dev: yarn native

    • Runs expo start

πŸ†• Add new dependencies

Pure JS dependencies

If you're installing a JavaScript-only dependency that will be used across platforms, install it in packages/app:

cd packages/app
yarn add date-fns
cd ../..
yarn

Native dependencies

If you're installing a library with any native code, you must install it in apps/expo:

cd apps/expo
yarn add react-native-reanimated

cd ../..
yarn

You can also install the native library inside of packages/app if you want to get autoimport for that package inside of the app folder. However, you need to be careful and install the exact same version in both packages. If the versions mismatch at all, you'll potentially get terrible bugs. This is a classic monorepo issue. I use lerna-update-wizard to help with this (you don't need to use Lerna to use that lib).

πŸŽ™ About the creator

Follow Fernando Rojo on Twitter: @FernandoTheRojo

🧐 Why use Expo + Next.js?

See my talk about this topic at Next.js Conf 2021:

image

GitHub

https://github.com/teovillanueva/react-native-web-maps-solito-example
You might also like...

Expose top-level identifiers in Next.js app.js

recma-nextjs-static-props Generate getStaticProps exposing top level identifiers Installation npm install recma-nexjs-static-props Usage This plugin i

Aug 8, 2022

A Next.js app to help developers learn about Web 3 protocols

A Next.js app to help developers learn about Web 3 protocols

This Next.js app is designed to be used with the Figment Learn Pathways, to help developers learn about various blockchain protocols such as Solana, NEAR, Secret, Polygon and Polkadot!

Aug 6, 2022

100 lines of code Hackernews reader (with the help of next.js).

About This is an isomorphic react app, displaying stories from hackernews made with super nice next.js. It's just about 100 lines of code. Nothing ser

May 31, 2022

Rauchg Blog - Blog built by a Next.js core maintainer.

blog This is the blog that powers rauchg.com, built on next.js and deployed to the cloud via Vercel. How to run First, install Vercel CLI. Development

Jul 30, 2022

πŸ“Ί Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished.

πŸ“Ί Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished.

Dashboard Create your own team dashboard with custom widgets. Table of Contents Installation Server Development Production Docker Create a Dashboard A

Aug 2, 2022

πŸ¦… Gank api base β–³ next.js (react&ssr)

πŸ¦… Gank api base β–³ next.js (react&ssr)

Introduction next.js(react ssr repo) and gank api Features Use react SSR framework next.js UI ant design antd Mobile UI ant design antd-mobile Support

Jul 21, 2022

A working example of a decoupled implementation using Next.js and GraphQL with the eZ Platform CMS

Decoupled CMS example with GraphQL and Next.js This repository contains the source code for the sample application from the talk "Easy decoupled siteb

Aug 22, 2021

Next.js website to list DJ and other musical events

Next.js website to list DJ and other musical events

Next.js website for DJ Events. This is part of my Next.js course on Udemy

Jul 30, 2022

Amazon clone with Next JS

Amazon clone with Next JS

Amazon clone with Next JS

Apr 26, 2022
Comments
  • 1. How to get Apple maps to work on iOS?

    Hi @teovillanueva,

    Your example works great on react-native-web.

    However, on iOS and Android I keep getting hit with the following error.

    I'm wondering if you have any insight into what could be causing this?

    IMG_0869 2 IMG_0870

    Reviewed by vbylen at 2022-08-01 23:52
Virtual Event Starter Kit Built With Next.js

Virtual Event Starter Kit Demo: https://demo.vercel.events This virtual event starter kit was used to run Next.js Conf 2020, which had almost 40,000 l

Mar 4, 2022
Next.js ReCaptcha V3 - Straightforward solution for using ReCaptcha in your Next.js application

⭐ Next.js ReCaptcha V3 Straightforward solution for using ReCaptcha in your Next.js application. ??️ Tiny and Tree-Shakable ?? Written in TypeScript ?

Jun 18, 2022
[ARCHIVED] experimenting React + GraphQL + Next.js web app on the theme of mindfulness

Relate Relate brings together mindfulness communities, teachers and individuals. Read the article on Medium Made with ❀︎ by Sébastien Dubois Deprecati

May 19, 2022
200 lines realtime todos app powered by next.js, preact, jet, redux and now
200 lines realtime todos app powered by next.js, preact, jet, redux and now

next-todos About 200 lines isomorphic todos app powered by next.js, redux and Jet realtime. The todos are synced between browsers. The canonical TodoA

Apr 24, 2022
A sample Next.js app for showing off it's capabilities
A sample Next.js app for showing off it's capabilities

NextGram Sample next app that takes advantage of the routing capabilities. In particular, notice that the photo route can be attached to two distinct

Apr 10, 2022
:pencil: JsonPlaceholder sample app made with Next.js
:pencil: JsonPlaceholder sample app made with Next.js

What? Next JPH is an example app made with JsonPlaceholder api, using Next.js, styled-components, flow and jest. "JPH" is an acronym to JsonPlaceholde

Dec 22, 2021
A Quine of Next.js app

This is a Next.js project bootstrapped with create-next-app.

Jul 10, 2021
Next.JS App to convert currencies!
Next.JS App to convert currencies!

Next.JS App to convert currencies!

Nov 30, 2021
Example Next.js app to upload photos to an S3 bucket.

Example Next.js app to upload photos to an S3 bucket.

Aug 4, 2022
Todo list app made with next js, redux and react-beautiful-dnd
Todo list app made with next js, redux and react-beautiful-dnd

Nextodo Todo list app made with next js, redux and react-beautiful-dnd [ Live Demo ] Source code for the demo page can be found on the nextodo repo Co

Aug 1, 2022