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.
- Installation and Configuration
- Custom Netlify Redirects
- Custom Netlify Functions
- Caveats
- Credits
- Showcase
Create a netlify.toml in the root of your project:
[build]
command = "npm run build"
functions = "out_functions"
publish = "out_publish"
[[plugins]]
package = "@netlify/plugin-nextjs"You can define custom redirects in a _redirects and/or in your netlify.toml file.
The precedence of these rules are:
_redirectsnext-on-netlifyredirectsnetlify.toml
Read more about Netlify redirects here.
next-on-netlify creates one Netlify Function for each of your
SSR pages and API endpoints. It is currently not possible to create custom Netlify Functions. Let me know if you have a need for this feature and we can add it.
Fallback pages behave differently with this plugin 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.
With this plugin, 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.
For more on this, see: Issue #7
This package is maintained by Lindsay Levine, Finn Woelm, and Cassidy Williams.
📣 Shoutout to @mottox2 (a pioneer of hosting Next.js on Netlify) and @danielcondemarin (author of serverless-next.js for AWS). The two were big inspirations for this package.
🙌 Big "thank you" to the following people for their contributions, support, and beta testing:
The following sites are built with next-on-netlify:
opinionatedreact.com (via Twitter)
Are you building something awesome with next-on-netlify? 🔥 Let us know and we will feature it here :)