diff --git a/packages/create-expo-app/package.json b/packages/create-expo-app/package.json index 80ed31cae0..7b0efbf82e 100644 --- a/packages/create-expo-app/package.json +++ b/packages/create-expo-app/package.json @@ -40,6 +40,7 @@ "@types/getenv": "^1.0.0", "@types/minipass": "^3.3.5", "@types/node": "^16.11.56", + "@types/node-fetch": "^2.5.8", "@types/prompts": "2.0.14", "@types/tar": "^6.1.2", "arg": "^5.0.2", diff --git a/packages/next-adapter/README.md b/packages/next-adapter/README.md index 576fdc6986..4ff4a06f4f 100644 --- a/packages/next-adapter/README.md +++ b/packages/next-adapter/README.md @@ -3,53 +3,250 @@ 👋 Welcome to
@expo/next-adapter -

Adapter document and server for Next.js projects using Expo modules.

+

Next.js plugin for using React Native modules

- - - - - Circle CI -

--- -> ⚠️ **Warning:** Support for Next.js is experimental. Please open an issue at [expo-cli/issues](https://github.com/expo/expo-cli/issues) if you encountered any problems. - -## [Documentation][docs] - -To learn more about Next.js usage with Expo, check out the docs here: [Using Next.js][docs] - -### Contributing to the docs - -- [Documentation for the master branch](https://github.com/expo/expo/blob/master/docs/pages/guides/using-nextjs.md) - -## License - -The Expo source code is made available under the [MIT license](LICENSE). Some of the dependencies are licensed differently, with the BSD license, for example. - - - ---- - -

- - - - - License: MIT - -

- -[docs]: https://docs.expo.dev/guides/using-nextjs/ -[nextjs]: https://nextjs.org/ -[next-docs]: https://nextjs.org/docs -[custom-document]: https://nextjs.org/docs#custom-document -[next-offline]: https://github.com/hanford/next-offline -[next-pwa]: https://nextjs.org/features/progressive-web-apps -[next-transpile-modules]: https://github.com/martpie/next-transpile-modules +> ⚠️ **Warning:** Support for Next.js is unofficial and not a first-class Expo feature. + +## Setup + +### Dependencies + +Ensure you have `expo`, `next`, `@expo/next-adapter` installed in your project. + +### Transpilation + +Configure Next.js to transform language features: + +
+ Next.js with swc. (Recommended) + + When using Next.js with SWC, you can configure the `babel.config.js` to only account for native. + +```js +// 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](https://nextjs.org/docs/messages/swc-disabled) by adding the following to your `next.config.js`: + +```js +// next.config.js +module.exports = { + experimental: { + forceSwcTransforms: true, + }, +}; +``` + +
+ +
+ Next.js with Babel. (Not recommended) + + Adjust your `babel.config.js` to conditionally add `next/babel` when bundling with Webpack for web. + +```js +// 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), + }; +}; +``` + +
+ +### Next.js configuration + +Add the following to your `next.config.js`: + +```js +const { withExpo } = require('@expo/next-adapter'); + +module.exports = withExpo({ + // experimental.transpilePackages is a Next.js +13 feature. + // older versions can use next-transpile-modules + experimental: { + transpilePackages: [ + 'react-native-web', + 'expo', + // Add more React Native / Expo packages here... + ], + }, +}); +``` + +The fully qualified Next.js config may look like: + +```js +const { withExpo } = require('@expo/next-adapter'); + +/** @type {import('next').NextConfig} */ +const nextConfig = withExpo({ + reactStrictMode: true, + swcMinify: true, + experimental: { + forceSwcTransforms: true, + transpilePackages: [ + 'react-native-web', + 'expo', + // Add more React Native / Expo packages here... + ], + }, +}); + +module.exports = nextConfig; +``` + +### React Native Web styling + +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. + +
+ Required pages/_document.js file + +```js +import { 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 = [ +