Next.js, Expo, and React Native for Web! π€©
Evan Bacon
γ»4 min read
Using Next.js with Expo will enable you to server side render your universal Expo app when it's running in the browser.
This guide will show you the recommended way for using modules from the Expo SDK with the Next.js tool-chain! (The banner is just for funsies, this is not a retro-runner tutorial)
π¨ SSR is an experimental feature with Expo so modules might not be fully optimized for Next.js. If you find bugs please report them on the Expo repo or expo-cli repo with the
[nextjs]tag in the title.
π€ Why use Next.js with Expo?
Here are the main benefits of using Zeit's Next.js with Expo for web:
- Mobile App: If you're already using Next.js, now you can add a native iOS and Android app that'll share most of your code from your website!
- Ultimate PWA: If you're new to Expo then this also means that you can use complex browser features from the Expo SDK like Camera, Gestures, Permissions, etc. whenever possible in the browser!
- You can very simply layout your routes and navigation by using the file system.
- Next.js is considered by many, to be the best way to build a website.
ππΌββοΈ Up and Running
For the most updated guide you should refer to the Expo docs: Using Next.js. Here are the latest docs on master.
In this approach you will be using SSR for web in your universal project. This is the recommended path because it gives you full access to the features of Expo and Next.js.
- Bootstrap your project with Expo
- Install the CLI:
npm i -g expo-cli - Create a project:
expo init --template blank -
cdinto the project
- Install the CLI:
- Install the adapter:
-
yarn:
yarn add @expo/next-adapter - npm:
npm i --save @expo/next-adapter
-
yarn:
- Add Next.js support:
yarn next-expo- Always commit your changes first!
- You can optionally choose which customizations you want to do with
--customize or -c - Force reload changes with
--force or -f
- Start the project with
yarn next dev- Go to
http://localhost:3000/to see your project!
- Go to
Opening in the browser will render the default template:
You can now start editing it and using the Expo SDK. Here is the example code I used to generate the header image: Retro Expo Text (copy/pasta into your project since snack uses a different Webpack config π)
Starting with Next.js
This approach is useful if you only want to use Expo components in your web-only project. If you chose to start with this flow I'd love to hear about why in the comments below :)
- Bootstrap your project with Next.js
- Create a project:
npx create-next-app
- Create a project:
- Install the adapter:
-
yarn:
yarn add @expo/next-adapter - npm:
npm i --save @expo/next-adapter
-
yarn:
- Add Next.js support:
yarn next-expo- Always commit your changes first!
- You can optionally choose which customizations you want to do with
--customize or -c - Force reload changes with
--force or -f
- Start the project with
yarn next dev- Go to
http://localhost:3000/to see your project!
- Go to
π New Commands
-
Starting web
- π«
expo start:web - β
yarn next dev
- π«
-
Building web
- π«
expo build:web - β
yarn next build
- π«
π File Structure
Here is the recommended file structure for an Expo project with Next.js support.
Expo Next.js
βββ pages β‘οΈ Routes
β βββ index.tsx β‘οΈ Entry Point for Next.js
β βββ _document.js β‘οΈ The wrapper element for a page, used for normalizing styles like React Native.
βββ .next β‘οΈ Generated Next.js files (should be ignored)
βββ assets β‘οΈ All static assets for your project
βββ App.tsx β‘οΈ Entry Point for Mobile apps
βββ app.json β‘οΈ Expo config file
βββ next.config.js β‘οΈ Next.js config file
βββ babel.config.js β‘οΈ Babel config (should be using `@expo/next-adapter/babel`)
Let me know in the comments if you think there's a more optimal structure for Next.js + Expo files.
π Thanks for Reading
I hope you found this article helpful! If you do use this workflow I'd love to hear about how it worked for you π If you didn't, I'd also love to hear! So go tweet some emojis at me :]
You should also check out some of the other adapters like Electron and Gatsby.



85
6


Trending on
Why the JavaScript import Statement is So Confusing
Introduction to State Machines in React
How should a total beginner to the field of CS and Programming get started?
Decorators - Building an API in Python with Flask
Introduction to TypeScript Generics
React Component Lifecycle Methods Cheatsheet
The Junior Developer Survival Guide: three pillars for success
The normal expo-for-web dev server (
expo start:web) uses metro bundler & webpack-dev-server collaboration. On the other hand, does next-expo's dev server (next dev) use the dev server managed only by next.js? (expo-cli's build system is not used?)That seems exciting, thank you for introducing.
Thanks so much! π I'm pretty hyped with how easy it is!
πππππππ
π₯³ππ₯³ππ₯³ππ₯³π
Awesome article! Done React Native without expo and Next.js projects and am now excited to bridge that gap.
How did you go about generating the file structure code block for this article?
Hah I did it manually π
Does this work even without react-native-web?
This is a web only feature as Next.js doesnβt support native platforms
This looks awesome! Does nextjs work work react-navigation? How will the routing work in native and web?