• Install the adapter:
  • yarn: yarn add -D @expo/next-adapter
  • npm: npm i --save-dev @expo/next-adapter
• 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!

• Install the adapter:
  • yarn: yarn add -D @expo/next-adapter
  • npm: npm i --save-dev @expo/next-adapter
• 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!

• Re-export the custom Document component in the pages/_document.js file of your Next.js project.
  • This will ensure react-native-web styling works.
  • You can run yarn next-expo -c then select pages/_document.js
  • Or you can create the file - mkdir pages; touch pages/_document.js
  pages/_document.js

  export { default } from '@expo/next-adapter/document';
  

• Create a babel.config.js and use babel-preset-expo.
  • You can run yarn next-expo -c then select babel.config.js
  • Or you can You may have installed this earlier with yarn add -D babel-preset-expo
  babel.config.js

  module.exports = {
    presets: ['@expo/next-adapter/babel'],
  };
  

• Update the Next.js next.config.js file to support loading React Native and Expo packages:
  • touch next.config.js
  next.config.js

  const { withExpo } = require('@expo/next-adapter');
  
  module.exports = withExpo({
    projectRoot: __dirname,
  });
  

• You can now start your Expo web + Next.js project with yarn next dev 🎉

import React from 'react';
import { Image } from 'react-native';

export default function ImageDemo() {
  return <Image source={require('./assets/image.png')} style={{ flex: 1 }} />;
}

import React, { useEffect, useState } from 'react';
import * as Font from 'expo-font';
import { Text } from 'react-native';

export default function FontDemo() {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    (async () => {
      try {
        await Font.loadAsync({
          // You can get this font on Github: https://shorturl.at/chEHS
          'space-mono': require('./assets/SpaceMono-Regular.ttf'),
        });
      } catch ({ message }) {
        // This will be called if something is broken
        console.log(`Error loading font: ${message}`);
      } finally {
        setLoaded(true);
      }
    })();
  }, []);

  if (!loaded) return <Text>Loading fonts...</Text>;

  return <Text style={{ fontFamily: 'space-mono' }}>Hello from Space Mono</Text>;
}

• Install next-offline to emulate Expo PWA features: yarn add next-offline
• Configure your Next.js project to use expo-notifications in the browser:
  • We inject a custom service worker so we'll need to change what Workbox names their service worker (it must be workbox-service-worker.js).
  next.config.js

  const withOffline = require('next-offline');
  const { withExpo } = require('@expo/next-adapter');
  
  // If you didn't install next-offline, then simply delete this method and the import.
  module.exports = withOffline({
    workboxOpts: {
      swDest: 'workbox-service-worker.js',
  
      /* changing any value means you'll have to copy over all the defaults  */
      /* next-offline */
      globPatterns: ['static/**/*'],
      globDirectory: '.',
      runtimeCaching: [
        {
          urlPattern: /^https?.*/,
          handler: 'NetworkFirst',
          options: {
            cacheName: 'offlineCache',
            expiration: {
              maxEntries: 200,
            },
          },
        },
      ],
    },
    ...withExpo({
      projectRoot: __dirname,
    }),
  });
  

• Copy the Expo service worker into your project's public folder: mkdir public; cp node_modules/\@expo/next-adapter/service-worker.js public/service-worker.js
• You can now test your project in production mode using the following: yarn next build && yarn next export && serve -p 3000 ./out

• Create a custom server to host your service worker: server.js

  const { startServerAsync } = require('@expo/next-adapter');
  
  startServerAsync(__dirname, {
    /* port: 3000 */
  });
  

• Start your project with node server.js

Handle server requests

const { createServerAsync } = require('@expo/next-adapter');
const { parse } = require('url');

createServerAsync(projectRoot, {
  handleRequest(req, res) {
    const parsedUrl = parse(req.url, true);
    const { pathname } = parsedUrl;

    // handle GET request to /cool-file.png
    if (pathname === '/cool-file.png') {
      const filePath = join(__dirname, '.next', pathname);

      app.serveStatic(req, res, filePath);
      // Return true to prevent the default handler
      return true;
    }
  },
}).then(({ server, app }) => {
  const port = 3000;

  server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);
  });
});

• let /service-worker.js serve the file content of /public/service-worker.js, and
• let /workbox-service-worker.js serve the file content of a service worker, which be:
  • /public/workbox-service-worker.js (which will by default be a blank file) if you do not want to use any other service worker, or
  • /_next/public/workbox-service-worker.js if you are using next-offline, or
  • your own service worker file.

{
  "version": 2,
  "routes": [
    {
      "src": "/service-worker.js",
      "dest": "/public/service-worker.js",
      "headers": {
        "cache-control": "public, max-age=43200, immutable",
        "Service-Worker-Allowed": "/"
      }
    },
    // If you are using next-offline, change the object below according to their guide.
    {
      "src": "/workbox-service-worker.js",
      "dest": "/public/workbox-service-worker.js",
      "headers": {
        "cache-control": "public, max-age=43200, immutable",
        "Service-Worker-Allowed": "/"
      }
    }
  ]
}