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.
The package will remain completely open source and [@cassidoo](https://github.com/cassidoo), the
10
-
Principal Developer Experience Engineer at Netlify, will be joining
11
-
`next-on-netlify` as a core maintainer.
12
18
13
-
---
19
+
`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.
[](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.
21
+
**TL;DR: You can enable SSR in your Next.js applications with 3 simple steps, listed [here](#setup)!**
23
22
24
23
- Demo: https://next-on.netlify.com/
25
24
- Example repository: https://github.com/FinnWoelm/next-on-netlify-demo
@@ -28,7 +27,7 @@ next-on-netlify is a utility for hosting NextJS applications with Server-Side Re
28
27
29
28
-[Installation](#installation)
30
29
-[Setup](#setup)
31
-
-[1. Set NextJS target to serverless](#1-set-nextjs--target-to-serverless)
30
+
-[1. Set Next.js target to serverless](#1-set-nextjs-target-to-serverless)
32
31
-[2. Add postbuild hook](#2-add-postbuild-hook)
33
32
-[3. Configure Netlify](#3-configure-netlify)
34
33
-[Optional Extras](#optional-extras)
@@ -38,8 +37,9 @@ next-on-netlify is a utility for hosting NextJS applications with Server-Side Re
38
37
-[Caveats](#caveats)
39
38
-[Preview Mode](#preview-mode)
40
39
-[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).
54
+
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
55
56
56
It's super simple. Just create a `next.config.js` file and write the following:
57
57
@@ -78,7 +78,7 @@ module.exports = {
78
78
79
79
#### 2. Add postbuild hook
80
80
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\*.
81
+
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
82
83
83
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
84
@@ -98,7 +98,7 @@ We want the next-on-netlify command to run after we build our NextJS application
98
98
99
99
#### 3. Configure Netlify
100
100
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:
101
+
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
102
103
103
```toml
104
104
[build]
@@ -135,7 +135,7 @@ Then, add the following `[dev]` block to your `netlify.toml`:
135
135
functions = "out_functions"
136
136
publish = "out_publish"
137
137
# We manually set the framework to static, otherwise Netlify automatically
From now on, whenever you want to preview your application locally, just run:
156
156
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
157
+
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
158
1.`netlify dev`: This will emulate Netlify on your computer and let you preview your app on `http://localhost:8888`.
159
159
160
160
#### Custom Netlify Redirects
@@ -177,31 +177,22 @@ SSR pages and API endpoints. It is currently not possible to create custom Netli
177
177
178
178
### Preview Mode
179
179
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)
180
+
[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
181
182
182
### Fallbacks for Pages with `getStaticPaths`
183
183
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.
184
+
[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
185
186
186
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
187
188
188
For more on this, see: [Issue #7](https://github.com/netlify/next-on-netlify/issues/7#issuecomment-636883539)
189
189
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
190
202
191
## Credits
203
192
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.
193
+
This package is maintained by [Lindsay Levine](https://github.com/lindsaylevine), [Finn Woelm](https://github.com/FinnWoelm), and [Cassidy Williams](https://github.com/cassidoo).
194
+
195
+
📣 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
196
206
197
🙌 Big "thank you" to the following people for their contributions, support, and beta testing:
207
198
@@ -214,3 +205,16 @@ Are you building something awesome with `next-on-netlify`? 🔥 Let us know and
214
205
-[@etrepum](https://github.com/etrepum)
215
206
-[@jonasbuntinx](https://github.com/jonasbuntinx)
216
207
-[@joostmeijles](https://github.com/joostmeijles)
208
+
209
+
210
+
## Showcase
211
+
212
+
The following sites are built with `next-on-netlify`:
0 commit comments