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
Copy file name to clipboardExpand all lines: README.md
+7-57Lines changed: 7 additions & 57 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1

2
2
3
-
# Next on Netlify Build Plugin
3
+
# Next.js Build Plugin
4
4
5
5
This build plugin 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.
6
6
@@ -24,66 +24,20 @@ This build plugin is a utility for enabling server-side rendering in Next.js on
24
24
25
25
## Installation and Configuration
26
26
27
-
Create a `netlify.toml`:
27
+
1.`npm install netlify-plugin-nextjs`
28
+
29
+
2. Create a `netlify.toml` in the root of your poject:
28
30
29
31
```toml
30
32
[build]
31
33
command = "npm run build"
32
34
functions = "out_functions"
33
-
publish = "out_publish"
34
-
```
35
-
36
-
## Setup
37
-
38
-
#### 1. Set Next.js target to serverless
39
-
40
-
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).
35
+
publish = "out_publish"
41
36
42
-
It's super simple. Just create a `next.config.js` file and write the following:
43
-
44
-
```js
45
-
// next.config.js
46
-
47
-
module.exports= {
48
-
// Target must be serverless
49
-
target:"serverless",
50
-
}
37
+
[[plugins]]
38
+
package = "netlify-plugin-nextjs"
51
39
```
52
40
53
-
If binaries are needed in the deployment the following configuration is needed ([Prisma](https://github.com/prisma/prisma) is an example):
54
-
55
-
```js
56
-
// next.config.js
57
-
58
-
module.exports= {
59
-
// Target must be experimental-serverless-trace
60
-
// Your build time will be longer with this option
61
-
target:"experimental-serverless-trace",
62
-
}
63
-
```
64
-
65
-
#### 2. Add postbuild hook
66
-
67
-
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\*.
68
-
69
-
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:
70
-
71
-
```json
72
-
{
73
-
"name": "my-nextjs-app",
74
-
"scripts": {
75
-
"dev": "next",
76
-
"build": "next build",
77
-
"postbuild": "next-on-netlify"
78
-
},
79
-
....
80
-
}
81
-
```
82
-
83
-
\*If you're curious about the "magic", check out the well-documented [`next-on-netlify.js` file](https://github.com/netlify/next-on-netlify/blob/master/next-on-netlify.js).
84
-
85
-
We're done. Let's deploy 🚀🚀🚀
86
-
87
41
## Optional Extras
88
42
89
43
#### Preview Locally
@@ -150,10 +104,6 @@ SSR pages and API endpoints. It is currently not possible to create custom Netli
150
104
151
105
## Caveats
152
106
153
-
### Preview Mode
154
-
155
-
[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)
156
-
157
107
### Fallbacks for Pages with `getStaticPaths`
158
108
159
109
[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.
0 commit comments