Next.js unveiled version 12.2 this week, and it’s the biggest new release in some time with several important updates. The most significant of these is the general availability of Middleware (with some important changes to the API), but there are also more updates for running SSR and API routes at the edge and some improvements to next/image.
Here’s what this all means for you.
Middleware
Next.js Middleware was introduced as a beta in Next 12 as a way to run functions before the request is handled. It lets you do things like add or remove headers and redirect or rewrite the request. With version 12.2, Next.js Middleware is now stable and generally available.
If you tried Middleware while it was in beta you will need to make some updates to your code, because the API has been changed in several important ways based on feedback from beta testers. See the migration guide for details.
During the beta period, Next Middleware on Netlify would run as part of server-side rendering (“at the origin”), with experimental support for running Middleware on Netlify Edge Functions (“at the edge”) available as an option.
With the stable release of Middleware, we now recommend all users to switch to Edge Middleware, for significant improvements to performance and usability. Running at the origin will remain the default while Netlify Edge Functions are in beta, but we recommend all users switch to Edge Middleware if possible. Running middleware at the origin will be deprecated in a future release. To opt-in, set the environment variable NEXT_USE_NETLIFY_EDGE to true.
Edge API Routes
Edge API Routes allow you to run API routes closer to your users. They are fully supported on Netlify if you enable NEXT_USE_NETLIFY_EDGE to deploy and run Netlify Edge Functions. However, we might recommend you consider using Netlify Edge Functions instead.
The API for Netlify Edge Functions is very similar to Edge API Routes, but they don’t have the additional overhead of the Next runtime, meaning that in most cases Netlify Edge Functions will have lower latency. They also give you access to thousands of Deno libraries. See some examples of what Netlify Edge Functions can do.
Edge SSR
Next now has alpha support for switchable runtimes, which allows sites to be rendered fully at the edge. This enables streaming SSR and React Server Components with React 18.
This is fully supported by Netlify Edge Functions which also support edge SSR for many other frameworks. Enable the experimental edge runtime in Next.js, and then set NEXT_USE_NETLIFY_EDGE to true, and your site will be deployed to the edge.
If you’d like to try these features out, you can reference the Next React Server Components demo.
Improvements to next/image
There are several improvements to Next image support in version 12.2, which are all supported on Netlify.
This includes the new remotePatterns configuration option which gives you more flexibility in specifying which remote images can be used. If you have manually installed the Essential Next.js Plugin in your package.json, ensure you upgrade to the latest version to enable this.
On-Demand Incremental Static Regeneration
Next.js 12.2 includes stable support for On-demand Incremental Static Regeneration (ISR). Today, Netlify has full support for ISR as well as the ability to update content upon request with On-demand Builders.
However, at this time, Netlify does not support On-demand ISR for Next.js. If you have a specific use case in mind, we’d love to hear from you about how you would like to use the feature.
Get started with Next.js on Netlify
We’re excited to see what you build on Netlify with this latest version of Next.js! Visit the Next.js on Netlify docs and get started today.
