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