Can you use Next.js with a React Native App?

Matthew C.

The Problem

You want to use Next.js, the full-stack React framework for building web apps, with React Native to build native iOS and Android apps. Is it possible to use Next.js with React Native?

The Solution

Next.js can be used with React Native where the build output is for the web. You can share some code between your Next.js web app and React Native mobile app or use a third-party library to simplify code sharing, setup, and deployment. The production build of a Next.js app produces HTML, CSS, and JavaScript files that you can deploy to a website. The production build of a React Native app produces files for uploading to a mobile app store.

When your React Native app runs on a mobile device, the JavaScript code in the app is used to create native Android or iOS UI views using React components. In Android and iOS development, a view is the fundamental building block of UIs. React Native creates the mobile platform-specific views at runtime through the React Native bridge that communicates with native code. For example, if your app renders the React Native <View> core component, it will render the <ViewGroup> view on Android and the <UIView> view on iOS.

Next.js React components don’t have corresponding mobile views. Some Next.js features, like server-side rendering, are not supported in native apps. You can share parts of your Next.js app with your React Native app like React components and React hooks that are not specific to the web or mobile OS. Your Next.js web app will use a different build step to the React Native build steps. Using a third-party library simplifies this process.

Use a Third-party Library to Integrate Next.js with React Native

Use a third-party library such as Solito to simplify using Next.js with React Native. Solito is a wrapper around the React Navigation library, used for routing and navigation in React Native, and Next.js that lets you share navigation code across platforms. Solito is mostly focused on navigation, one of the hardest parts of cross-platform development.

Solito has an API that makes creating components for both Next.js web apps and React Native mobile apps easy.

Consider, for example, the following SolitoImage component:

import { SolitoImage } from 'solito/image';

export function MyImage() {
  return (
    <SolitoImage
      src="https://example.com/image.png"
      height={100}
      width={100}
      alt="An example image."
    />
  );
}

The SolitoImage component replaces the Next.js Image component. When you create a web application build, it uses the Next.js Image component. For iOS and Android builds, it uses the Expo Image component. Solito uses Expo, an ecosystem of tools for creating React Native apps that can be deployed to Android, iOS, or the web.

Solito also supports Next.js App router, but only client components can be used.

If you use Expo to develop your React Native mobile app, you can use the @expo/next-adapter library to use Next.js with Expo. The next-adaptor library handles configuring using Next.js with Expo and sharing components and APIs between your Next.js web app and mobile app. One issue with this library is that it does not currently support the Next.js app router.