@expo/next-adapter
Advanced tools
@expo/next-adapter
Next.js plugin for using React Native modules
⚠️ Warning: Support for Next.js is unofficial and not a first-class Expo feature.
Ensure you have expo, next, @expo/next-adapter installed in your project.
Configure Next.js to transform language features:
When using Next.js with SWC, you can configure the babel.config.js to only account for native.
// babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
You will also have to force Next.js to use SWC by adding the following to your next.config.js:
// next.config.js
module.exports = {
experimental: {
forceSwcTransforms: true,
},
};
Adjust your babel.config.js to conditionally add next/babel when bundling with Webpack for web.
// babel.config.js
module.exports = function (api) {
// Detect web usage (this may change in the future if Next.js changes the loader)
const isWeb = api.caller(
caller =>
caller && (caller.name === 'babel-loader' || caller.name === 'next-babel-turbo-loader')
);
return {
presets: [
// Only use next in the browser, it'll break your native project
isWeb && require('next/babel'),
'babel-preset-expo',
].filter(Boolean),
};
};
Add the following to your next.config.js:
const { withExpo } = require('@expo/next-adapter');
module.exports = withExpo({
// transpilePackages is a Next.js +13.1 feature.
// older versions can use next-transpile-modules
transpilePackages: [
'react-native',
'expo',
// Add more React Native / Expo packages here...
],
});
The fully qualified Next.js config may look like:
const { withExpo } = require('@expo/next-adapter');
/** @type {import('next').NextConfig} */
const nextConfig = withExpo({
reactStrictMode: true,
swcMinify: true,
transpilePackages: [
'react-native',
'expo',
// Add more React Native / Expo packages here...
],
experimental: {
forceSwcTransforms: true,
},
});
module.exports = nextConfig;
The package react-native-web builds on the assumption of reset CSS styles, here's how you reset styles in Next.js using the pages/ directory.
pages/_document.js fileimport { Children } from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { AppRegistry } from 'react-native';
// Follows the setup for react-native-web:
// https://necolas.github.io/react-native-web/docs/setup/#root-element
// Plus additional React Native scroll and text parity styles for various
// browsers.
// Force Next-generated DOM elements to fill their parent's height
const style = `
html, body, #__next {
-webkit-overflow-scrolling: touch;
}
#__next {
display: flex;
flex-direction: column;
height: 100%;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
/* Allows you to scroll below the viewport; default value is visible */
overflow-y: auto;
overscroll-behavior-y: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-ms-overflow-style: scrollbar;
}
`;
export default class MyDocument extends Document {
static async getInitialProps({ renderPage }) {
AppRegistry.registerComponent('main', () => Main);
const { getStyleElement } = AppRegistry.getApplication('main');
const page = await renderPage();
const styles = [
<style key="react-native-style" dangerouslySetInnerHTML={{ __html: style }} />,
getStyleElement(),
];
return { ...page, styles: Children.toArray(styles) };
}
render() {
return (
<Html style={{ height: '100%' }}>
<Head />
<body style={{ height: '100%', overflow: 'hidden' }}>
<Main />
<NextScript />
</body>
</Html>
);
}
}
pages/_app.js fileimport Head from 'next/head';
export default function App({ Component, pageProps }) {
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Component {...pageProps} />
</>
);
}
By default, modules in the React Native ecosystem are not transpiled to run in web browsers. React Native relies on advanced caching in Metro to reload quickly. Next.js uses Webpack, which does not have the same level of caching, so by default, no node modules are transpiled. You will have to manually mark every module you want to transpile with the transpilePackages option in next.config.js:
const { withExpo } = require('@expo/next-adapter');
module.exports = withExpo({
experimental: {
transpilePackages: [
// NOTE: Even though `react-native` is never used in Next.js,
// you need to list `react-native` because `react-native-web`
// is aliased to `react-native`. Adding `react-native-web` will not work.
'react-native',
'expo',
// Add more React Native / Expo packages here...
],
},
});
Using Next.js for the web means you will be bundling with the Next.js Webpack config. This will lead to some core differences in how you develop your app vs your website.
Figure out which module has the import statement and add it to the transpilePackages option in next.config.js:
const { withExpo } = require('@expo/next-adapter');
module.exports = withExpo({
experimental: {
transpilePackages: [
'react-native',
'expo',
// Add failing package here, and restart the server...
],
},
});
FAQs
Adapter for using Next.js to bundle Expo web projects
The npm package @expo/next-adapter receives a total of 19,094 weekly downloads. As such, @expo/next-adapter popularity was classified as popular.
We found that @expo/next-adapter demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 24 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.
Security News
Socket CEO Feross Aboukhadijeh joins Risky Business Weekly to unpack recent npm phishing attacks, their limited impact, and the risks if attackers get smarter.
Product
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.