Create a Monorepo of React Native and NextJS

This post will cover steps to create a monorepo of React Native and NextJS.

Getting Started
Let’s say that the folder structure is like the following:

MyMonorepo
|- MyApp
  |- ...
|- MyWeb
  |- ...
|- shared

We will put the NextJS application inMyWeb folder and React Native application inMyApp . The shared folder will contain the components or the logics we are gonna use across the platforms.

Shared Components
This is where monorepo shines: we can share components and logics across platforms. Let’s create a simple component for a basic example in /shared/components/Demo.js:

/shared/components/Demo.js

Note that I import Text component from react-native . You might be wondering how the website will handle that. Fortunately, there is a 3rd party plugin named react-native-web. The plugin lets us use most of React Native APIs in the website. Sounds pretty cool, right?

React Native
There is no troublesome configuration here. Go to your project’s root directory (in this post, it’s named MyMonorepo ). Inside that directory, create a React Native application. In this post, I name it MyApp . For more details of how to create a React Native application, you can read it here.

By the time I create this post, the versions of React and React Native are:

"react": "16.8.6",
"react-native": "0.60.5"

After finish creating the application, go to metro.config.js and change the content to the following:

/MyApp/metro.config.js

Go to your App.js and change the content to the following:

/MyApp/App.js

At this point, if you run your React Native application, you can see the Demo component in your device’s / simulator’s screen.

NextJS
NextJS is one of the most powerful ReactJS framework. It supports almost every feature you need to build your modern ReactJS application. SSR, PWA, code splitting, you mention it. Go to MyMonorepo directory . Create a new NextJS app, in this post, I name the folder MyWeb . After that, install react-native-web and follow the installation steps thoroughly. Then, create a next.config.js and change the content to the following:

/MyWeb/next.config.js

Go to /MyWeb/pages/index.js and change the content to the following:

/MyWeb/pages/index.js

At this point, if you run your NextJS application, you can see the Demo component in your browser’s display.

Conclusion
That’s it! You just create a shareable component across platforms. Try to change the content or style of the component, you will see that the change applies, either in web or app .

In a real world application, the setup might need more additional configurations. Especially in the NextJS side. For example: when you’re importing an image inside the shared folder, you may need to install next-images plugin. 

Here’s an example of a more complex application you can create with the monorepo:

Exciting, isn’t it?

Of course it’s not limited to components. You can share logics as well. While this looks great, this is not the only approach on how to create a monorepo. But hey, you can take this as your basic knowledge.