@netlify/plugin-nextjs

Next.js Build Plugin

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.

Table of Contents

• Installation and Configuration
• Custom Netlify Redirects
• Custom Netlify Functions
• Caveats
  • Fallbacks for Pages with getStaticPaths
• Credits
• Showcase

Installation and Configuration

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"

Custom Netlify Redirects

You can define custom redirects in a _redirects and/or in your netlify.toml file. The precedence of these rules are:

• _redirects
• next-on-netlify redirects
• netlify.toml

Read more about Netlify redirects here.

Custom Netlify Functions

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.

Caveats

Fallbacks for Pages with getStaticPaths

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

Credits

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:

• @spencewood
• @alxhghs
• @gamliela
• @wei
• @laugharn
• @rajington
• @etrepum
• @jonasbuntinx
• @joostmeijles

Showcase

The following sites are built with next-on-netlify:

opinionatedreact.com (via Twitter)

missionbit.org (#18)

Are you building something awesome with next-on-netlify? 🔥 Let us know and we will feature it here :)