Zero to $10 Million with React Native + Next.js - Fernando Rojo - (Next.js Conf 2021)

My name is Fernando Rojo and I'm the co-founder  and CTO at BeatGig we're a marketplace for booking artists you can think of it like Airbnb  for live music. Today I'm going to talk about using React Native with Next.js my goal with  this talk is to convince you that React Native is the best way to build a UI even if you're only  making a website one year ago we started building

our product from scratch and I decided to use  React Native with Next.js to build the front end in the time since we have shipped over 100  screens all of the code lives in a single monorepo our product works on web iOS and  Android with full feature parity this is all with one person building and designing  the front end as a result we have grown from zero

to over 10 million in sales in under one year  thanks to our cross-platform stack we can iterate rapidly and ship features daily our number  one priority is reducing the time from idea to deployment and React Native is our greatest  instrument in doing so combine it with Next.js

and you can deliver an amazing user experience  on web. Now React Native with Next.js is a relatively new stack so I faced a few  issues along the way my plan with this talk is to break down each issue and show you how we  solve them we'll look at navigation animations, responsive design systems, platform specific  features, monorepo support, and more let's jump in

the biggest difference in structure between  a React Native app and a Next.js website is navigation so let's see how it works  to the left I have the BeatGig website and on the right the iPhone app let's compare  what happens when I open some artist profiles okay here we have it open on the website I'll do  the same on the app looks basically the exact same I'll go back and let's do one more I'll open B.o.B  on the website and now on the app so let's compare

what happened on the website we have @bob here in  the URL on the iPhone app there's obviously no URL and the only real difference is that on the  iPhone app I can swipe back here and I got the stack transition in so I'll go back and I'll  go back here on the website too the key thing to take away here is the design is mostly shared and  the logic is fully shared between platforms but we still match the user's expectations based on the  platform they're using. Let's see how we do it

this part is really cool we're going to use the  same screens across Next.js and React Native our first step is to create a shared artist screen  component I'll expect every file in the screens folder to be shared across platform next I'll  create a Next.js page at pages/artist/slug and I'll import that same artist screen component  all we have to do is default export it and our

artist screen is now working on Next.js for  the search screen I'll create a shared search screen component import it in pages search  and default export it if you use Next Router this should look really familiar we now have  our React Native pages rendering on Next.js the missing piece is how do we use the same  screens in the React Native iPhone and Android app here we're looking at app.tsx React Native  uses this file as a single entry point rather