You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on May 10, 2021. It is now read-only.
[](https://www.cypress.io/)
21
-
22
-
next-on-netlify is a utility for hosting NextJS applications with Server-Side Rendering on Netlify. It wraps your NextJS application in a tiny compatibility layer, so that pages can be server-side rendered with Netlify functions.
11
+
`next-on-netlify` is a utility for enabling server-side rendering in Next.js on Netlify. It wraps your application in a tiny compatibility layer, so that pages can use Netlify Functions to be server-side rendered.
23
12
24
13
- Demo: https://next-on.netlify.com/
25
14
- Example repository: https://github.com/FinnWoelm/next-on-netlify-demo
26
15
16
+
27
17
## Table of Contents
28
18
29
19
-[Installation](#installation)
@@ -38,8 +28,9 @@ next-on-netlify is a utility for hosting NextJS applications with Server-Side Re
38
28
-[Caveats](#caveats)
39
29
-[Preview Mode](#preview-mode)
40
30
-[Fallbacks for Pages with `getStaticPaths`](#fallbacks-for-pages-with-getstaticpaths)
We must build our NextJS app as a serverless app. You can read more about serverless NextJS[here](https://nextjs.org/docs/api-reference/next.config.js/build-target#serverless-target).
45
+
We must build our Next.js app as a serverless app. You can read more about serverless Next.js[here](https://nextjs.org/docs/api-reference/next.config.js/build-target#serverless-target).
55
46
56
47
It's super simple. Just create a `next.config.js` file and write the following:
57
48
@@ -78,7 +69,7 @@ module.exports = {
78
69
79
70
#### 2. Add postbuild hook
80
71
81
-
The next-on-netlify package adds the `next-on-netlify` command. When we run this command, some magic happens to prepare our NextJS app for hosting on Netlify\*.
72
+
The next-on-netlify package adds the `next-on-netlify` command. When we run this command, some magic happens to prepare our Next.js app for hosting on Netlify\*.
82
73
83
74
We want the next-on-netlify command to run after we build our NextJS application. So let's add a postbuild hook to our package.json file:
84
75
@@ -98,7 +89,7 @@ We want the next-on-netlify command to run after we build our NextJS application
98
89
99
90
#### 3. Configure Netlify
100
91
101
-
We're almost done! We just have to tell Netlify how to build our NextJS app, where the functions folder is located, and which folder to upload to its CDN. We do that with a `netlify.toml` file and the following instructions:
92
+
We're almost done! We just have to tell Netlify how to build our Next.js app, where the functions folder is located, and which folder to upload to its CDN. We do that with a `netlify.toml` file and the following instructions:
102
93
103
94
```toml
104
95
[build]
@@ -135,7 +126,7 @@ Then, add the following `[dev]` block to your `netlify.toml`:
135
126
functions = "out_functions"
136
127
publish = "out_publish"
137
128
# We manually set the framework to static, otherwise Netlify automatically
From now on, whenever you want to preview your application locally, just run:
156
147
157
-
1.`npm run build`: This will run `next build` to build your NextJS app and `next-on-netlify` to prepare your NextJS app for compatibility with Netlify
148
+
1.`npm run build`: This will run `next build` to build your Next.js app and `next-on-netlify` to prepare your Next.js app for compatibility with Netlify
158
149
1.`netlify dev`: This will emulate Netlify on your computer and let you preview your app on `http://localhost:8888`.
159
150
160
151
#### Custom Netlify Redirects
@@ -177,31 +168,22 @@ SSR pages and API endpoints. It is currently not possible to create custom Netli
177
168
178
169
### Preview Mode
179
170
180
-
[NextJS Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode) does not work on pages that are pre-rendered (pages with `getStaticProps`). Netlify currently does not support cookie-based redirects, which are needed for supporting preview mode on pre-rendered pages. Preview mode works correctly on any server-side-rendered pages (pages with `getInitialProps` or `getServerSideProps`). See: [Issue #10](https://github.com/netlify/next-on-netlify/issues/10)
171
+
[Next.js Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode) does not work on pages that are pre-rendered (pages with `getStaticProps`). Netlify currently does not support cookie-based redirects, which are needed for supporting preview mode on pre-rendered pages. Preview mode works correctly on any server-side-rendered pages (pages with `getInitialProps` or `getServerSideProps`). See: [Issue #10](https://github.com/netlify/next-on-netlify/issues/10)
181
172
182
173
### Fallbacks for Pages with `getStaticPaths`
183
174
184
-
[Fallback pages](https://nextjs.org/docs/basic-features/data-fetching#fallback-true) behave differently with `next-on-netlify` than they do with NextJS. On NextJS, when navigating to a path that is not defined in `getStaticPaths`, it first displays the fallback page. NextJS then generates the HTML in the background and caches it for future requests.
175
+
[Fallback pages](https://nextjs.org/docs/basic-features/data-fetching#fallback-true) behave differently with `next-on-netlify` than they do with Next.js. On Next.js, when navigating to a path that is not defined in `getStaticPaths`, it first displays the fallback page. Next.js then generates the HTML in the background and caches it for future requests.
185
176
186
177
With `next-on-netlify`, when navigating to a path that is not defined in `getStaticPaths`, it server-side renders the page and sends it directly to the user. The user never sees the fallback page. The page is not cached for future requests.
187
178
188
179
For more on this, see: [Issue #7](https://github.com/netlify/next-on-netlify/issues/7#issuecomment-636883539)
189
180
190
-
## Showcase
191
-
192
-
The following sites are built with `next-on-netlify`:
Are you building something awesome with `next-on-netlify`? 🔥 Let us know and we will feature it here :)
201
181
202
182
## Credits
203
183
204
-
📣 Shoutout to [@mottox2](https://github.com/mottox2) (a pioneer of hosting NextJS on Netlify) and [@danielcondemarin](https://github.com/danielcondemarin) (author of serverless-next.js for AWS). The two were big inspirations for this package.
184
+
This package is maintained by [Lindsay Levine](https://github.com/lindsaylevine), [Finn Woelm](https://github.com/FinnWoelm), and [Cassidy Williams](https://github.com/cassidoo).
185
+
186
+
📣 Shoutout to [@mottox2](https://github.com/mottox2) (a pioneer of hosting Next.js on Netlify) and [@danielcondemarin](https://github.com/danielcondemarin) (author of serverless-next.js for AWS). The two were big inspirations for this package.
205
187
206
188
🙌 Big "thank you" to the following people for their contributions, support, and beta testing:
207
189
@@ -214,3 +196,16 @@ Are you building something awesome with `next-on-netlify`? 🔥 Let us know and
214
196
-[@etrepum](https://github.com/etrepum)
215
197
-[@jonasbuntinx](https://github.com/jonasbuntinx)
216
198
-[@joostmeijles](https://github.com/joostmeijles)
199
+
200
+
201
+
## Showcase
202
+
203
+
The following sites are built with `next-on-netlify`:
0 commit comments