Skip to content

Commit 4e84501

Browse files
authored
Merge pull request #3 from netlify/ll/readme-config-update
README config updates
2 parents da89b54 + 2145c96 commit 4e84501

File tree

1 file changed

+7
-57
lines changed

1 file changed

+7
-57
lines changed

README.md

Lines changed: 7 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
![Next.js on Netlify Build Plugin](nextonnetlify.png)
22

3-
# Next on Netlify Build Plugin
3+
# Next.js Build Plugin
44

55
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.
66

@@ -24,66 +24,20 @@ This build plugin is a utility for enabling server-side rendering in Next.js on
2424

2525
## Installation and Configuration
2626

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:
2830

2931
```toml
3032
[build]
3133
command = "npm run build"
3234
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"
4136

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"
5139
```
5240

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-
8741
## Optional Extras
8842

8943
#### Preview Locally
@@ -150,10 +104,6 @@ SSR pages and API endpoints. It is currently not possible to create custom Netli
150104

151105
## Caveats
152106

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-
157107
### Fallbacks for Pages with `getStaticPaths`
158108

159109
[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

Comments
 (0)