Skip to content

Commit 02b6ae6

Browse files
EvanBaconEvanBacon
authored
@evanbacon/with next/update (expo#406)
* update to support the new next.js adapter * Update README.md * update to work with next 13.1.1
1 parent 372187c commit 02b6ae6

File tree

7 files changed

+108
-44
lines changed

7 files changed

+108
-44
lines changed

‎with-nextjs/README.md

+8-27
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,21 @@
55
<img alt="Supports Expo Web" longdesc="Supports Expo Web" src="https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff" />
66
</p>
77

8-
Using Next.js with Expo will enable you to [server side render](https://nextjs.org/features/server-side-rendering) the web part of your Expo app. This demo shows you how to setup your universal application to use use advanced universal modules from the Expo SDK like Camera, Gestures, Permissions, etc... with the Next.js tool-chain!
9-
10-
> 🚨 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](https://github.com/expo/expo/issues) or [expo-cli repo](https://github.com/expo/expo-cli/issues) with the `[nextjs]` tag in the title.
11-
12-
### ⚽️ Running in the browser
13-
14-
For the most updated guide you should refer to the Expo docs: [Using Next.js](https://docs.expo.dev/versions/latest/guides/using-nextjs/). Here are the [latest docs on master](https://github.com/expo/expo/blob/master/docs/pages/guides/using-nextjs.md).
15-
16-
In this approach you would 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.
17-
18-
- Bootstrap your project with Expo
19-
- Install the CLI: `npm i -g expo-cli`
20-
- Create a project: `expo init --template blank`
21-
- `cd` into the project
22-
- Install the adapter:
23-
- **yarn:** `yarn add @expo/next-adapter`
24-
- npm: `npm i --save @expo/next-adapter`
25-
- Add Next.js support: `yarn next-expo`
26-
- Always commit your changes first!
27-
- You can optionally choose which customizations you want to do with `--customize or -c`
28-
- Force reload changes with `--force or -f`
29-
- Start the project with `yarn next dev`
30-
- Go to `http://localhost:3000/` to see your project!
8+
This demo shows you how to setup your Next.js website to use packages from the Expo SDK like Camera, Gestures, Permissions, etc... Refer to the [Next adapter docs](https://github.com/expo/expo-cli/tree/main/packages/next-adapter) to learn how to add more React Native packages to your Next.js project.
319

3210
### 🏁 New Commands
3311

12+
When targeting web, you'll need to use the Next.js CLI instead of Expo CLI:
13+
3414
- **Starting web**
35-
- 🚫 `expo start:web`
36-
- ✅ `yarn next dev`
15+
16+
- 🚫 `yarn expo`
17+
- ✅ `yarn next`
3718

3819
- **Building web**
39-
- 🚫 `expo build:web`
20+
- 🚫 `yarn expo export:web`
4021
- ✅ `yarn next build`
4122

4223
### 👀 More Info
4324

44-
- [Next Adapter repo](https://github.com/expo/expo-cli/tree/master/packages/next-adapter)
25+
- [Next Adapter repo](https://github.com/expo/expo-cli/tree/main/packages/next-adapter)

‎with-nextjs/babel.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// babel.config.js
2+
module.exports = function (api) {
3+
api.cache(true);
4+
return {
5+
presets: ["babel-preset-expo"],
6+
};
7+
};

‎with-nextjs/next.config.js

+15-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
1-
// @generated: @expo/[email protected]
2-
// Learn more: https://docs.expo.io/guides/using-nextjs/
3-
41
const { withExpo } = require("@expo/next-adapter");
5-
const withPlugins = require("next-compose-plugins");
6-
const withTM = require("next-transpile-modules")(["react-native-web"]);
72

8-
module.exports = withPlugins([withTM, withExpo], {});
3+
/** @type {import('next').NextConfig} */
4+
const nextConfig = withExpo({
5+
reactStrictMode: true,
6+
swcMinify: true,
7+
transpilePackages: [
8+
"react-native",
9+
"expo",
10+
// Add more React Native / Expo packages here...
11+
],
12+
experimental: {
13+
forceSwcTransforms: true,
14+
},
15+
});
16+
17+
module.exports = nextConfig;

‎with-nextjs/package.json

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
{
22
"dependencies": {
33
"expo": "^47.0.0",
4-
"next": "^12.2.5",
4+
"next": "~13.1.1",
55
"react": "18.1.0",
66
"react-dom": "18.1.0",
77
"react-native": "0.70.5",
88
"react-native-web": "~0.18.7"
99
},
1010
"devDependencies": {
1111
"@babel/core": "^7.19.3",
12-
"@expo/next-adapter": "4.0.13",
13-
"next-compose-plugins": "^2.2.1",
14-
"next-transpile-modules": "^9.0.0"
12+
"@expo/next-adapter": "~5.0.0"
1513
},
1614
"scripts": {
1715
"start": "next dev",

‎with-nextjs/pages/_app.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Head from "next/head";
2+
3+
export default function App({ Component, pageProps }) {
4+
return (
5+
<>
6+
<Head>
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
</Head>
9+
<Component {...pageProps} />
10+
</>
11+
);
12+
}

‎with-nextjs/pages/_document.js

+60-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,60 @@
1-
// @generated: @expo/[email protected]
2-
export { default } from '@expo/next-adapter/document';
1+
import { Children } from "react";
2+
import Document, { Html, Head, Main, NextScript } from "next/document";
3+
import { AppRegistry } from "react-native-web";
4+
5+
// Follows the setup for react-native-web:
6+
// https://necolas.github.io/react-native-web/docs/setup/#root-element
7+
// Plus additional React Native scroll and text parity styles for various
8+
// browsers.
9+
// Force Next-generated DOM elements to fill their parent's height
10+
const style = `
11+
html, body, #__next {
12+
-webkit-overflow-scrolling: touch;
13+
}
14+
#__next {
15+
display: flex;
16+
flex-direction: column;
17+
height: 100%;
18+
}
19+
html {
20+
scroll-behavior: smooth;
21+
-webkit-text-size-adjust: 100%;
22+
}
23+
body {
24+
/* Allows you to scroll below the viewport; default value is visible */
25+
overflow-y: auto;
26+
overscroll-behavior-y: none;
27+
text-rendering: optimizeLegibility;
28+
-webkit-font-smoothing: antialiased;
29+
-moz-osx-font-smoothing: grayscale;
30+
-ms-overflow-style: scrollbar;
31+
}
32+
`;
33+
34+
export default class MyDocument extends Document {
35+
static async getInitialProps({ renderPage }) {
36+
AppRegistry.registerComponent("main", () => Main);
37+
const { getStyleElement } = AppRegistry.getApplication("main");
38+
const page = await renderPage();
39+
const styles = [
40+
<style
41+
key="react-native-style"
42+
dangerouslySetInnerHTML={{ __html: style }}
43+
/>,
44+
getStyleElement(),
45+
];
46+
return { ...page, styles: Children.toArray(styles) };
47+
}
48+
49+
render() {
50+
return (
51+
<Html style={{ height: "100%" }}>
52+
<Head />
53+
<body style={{ height: "100%", overflow: "hidden" }}>
54+
<Main />
55+
<NextScript />
56+
</body>
57+
</Html>
58+
);
59+
}
60+
}

‎with-nextjs/pages/index.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
// @generated: @expo/[email protected]
2-
import React from 'react';
3-
import { StyleSheet, Text, View } from 'react-native';
1+
import React from "react";
2+
import { StyleSheet, Text, View } from "react-native";
43

54
export default function App() {
65
return (
@@ -13,8 +12,8 @@ export default function App() {
1312
const styles = StyleSheet.create({
1413
container: {
1514
flex: 1,
16-
justifyContent: 'center',
17-
alignItems: 'center',
15+
justifyContent: "center",
16+
alignItems: "center",
1817
},
1918
text: {
2019
fontSize: 16,

0 commit comments

Comments
 (0)