Skip to content
This repository was archived by the owner on May 10, 2021. It is now read-only.

Commit a194e5d

Browse files
committed
Add README
Explain how to install and set up next-on-netlify.
1 parent d4b38f4 commit a194e5d

File tree

1 file changed

+127
-0
lines changed

1 file changed

+127
-0
lines changed

README.md

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
# README
2+
3+
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.
4+
5+
6+
7+
- Demo: https://next-on.netlify.com/
8+
- Example repository: https://github.com/FinnWoelm/next-on-netlify-demo
9+
10+
## Installation
11+
12+
```
13+
npm install --save next-on-netlify
14+
```
15+
16+
## Setup
17+
18+
#### 1. Set NextJS target to serverless
19+
20+
We must build our NextJS app as a serverless app. You can read more about serverless NextJS here.
21+
22+
It's super simple. Just create a `next.config.js` file and write the following:
23+
24+
```js
25+
// next.config.js
26+
27+
module.exports = {
28+
// Target must be serverless
29+
target: 'serverless',
30+
// distDir already has .next as default
31+
distDir: '.next',
32+
};
33+
```
34+
35+
#### 2. Add postbuild hook
36+
37+
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*.
38+
39+
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:
40+
41+
```json
42+
{
43+
"name": "my-nextjs-app",
44+
"scripts": {
45+
"dev": "next",
46+
"build": "next build",
47+
"postbuild": "next-on-netlify"
48+
},
49+
....
50+
}
51+
```
52+
53+
\*If you're curious about the "magic", check out the well-documented [`next-on-netlify.js` file](https://github.com/FinnWoelm/next-on-netlify/blob/master/next-on-netlify.js).
54+
55+
#### 3. Configure Netlify
56+
57+
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:
58+
59+
```toml
60+
[build]
61+
command = "npm run build"
62+
functions = "functions"
63+
publish = "public"
64+
```
65+
66+
We're done. Let's deploy 🚀🚀🚀
67+
68+
## Optional Extras
69+
70+
#### Preview Locally
71+
72+
I recommend you still use `next dev` to build and preview your application locally.
73+
74+
But if you want to emulate the Netlify deployment on your computer, you can also run `next-on-netlify` locally and then use `netlify-cli` to preview the result.
75+
76+
To do that, first install `serve` and `netlify-cli`:
77+
```
78+
npm install --save-dev serve
79+
npm install -g netlify-cli
80+
```
81+
82+
Then add the following `[dev]` block to your `netlify.toml`:
83+
84+
```toml
85+
[dev]
86+
command = "serve public -p 3000"
87+
functions = "functions"
88+
publish = "public"
89+
```
90+
91+
And add the following lines to your `.gitignore`:
92+
```shell
93+
# .gitignore
94+
95+
# Files generated by next-on-netlify command
96+
functions/nextRouter
97+
public/_next
98+
public/_redirects
99+
```
100+
101+
Now you're all set.
102+
103+
From now on, whenever you want to preview your application locally, just run:
104+
1. `next build` to build your NextJS app
105+
1. then `next-on-netlify` to prepare it for compatibility with Netlify
106+
1. and then `netlify-cli dev` to preview your app as if it was hosted on Netlify
107+
108+
#### Add Custom Redirects
109+
110+
next-on-netlify defines redirects in `public/_redirects`. Do not manually add redirects there or they will be overwritten the next time you run `next-on-netlify`.
111+
112+
Instead, you can define redirects in a `_redirects` file at the root level. These will be merged into the `public/_redirects` when you run `next-on-netlify`.
113+
114+
Or you can define custom redirects in the `netlify.toml` file.
115+
116+
[Read more about Netlify redirects here](https://docs.netlify.com/routing/redirects/).
117+
118+
119+
## Limitations
120+
121+
next-on-netlify has only been tested on NextJS version 9 and above.
122+
123+
next-on-netlify does not yet support [catch-all routes](https://nextjs.org/blog/next-9-2#catch-all-dynamic-routes) (yet).
124+
125+
## Credits
126+
127+
📣 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.

0 commit comments

Comments
 (0)