We are excited to announce a new, better runtime for Next.js — available on Netlify today! Alongside this runtime environment, developers can also download a new package @netlify/next which extends what’s possible with Next.js Middleware.
Next.js Advanced Middleware, available in the new @netlify/next package, supports HTML rewrites, page data transforms, and gives you full access to the response body. This allows you to modify content on the fly, at the edge, without unnecessary client-side JavaScript or complicated SSR strategies.
You can read about the new runtime in Netlify’s Next.js documentation and follow a step-by-step tutorial to get started with Next.js Advanced Middleware.
What’s new with Next.js Runtime
Netlify’s new Next.js Runtime environment lets you run Next.js on a more modern edge network that gives you more power and flexibility than what’s available with other platforms.
Additionally, the new Next.js Runtime is perfectly form fitted to run Next.js and all of its core features with zero configuration.
The power to transform content at the edge
When you use the @netlify/next package on Netlify’s new Next.js Runtime, you unlock access to modify responses and request headers at the edge. Next.js Advanced Middleware supports HTML rewrites, page data transforms, and gives you full access to the response body.
This means you can achieve personalization use cases like localization and authentication without the trade-offs of SSR or heavy client-side JavaScript.
For example, you could:
- Show different content to site visitors based on their geolocation
- Authenticate users to an app without revealing private keys in the request
- Modify cookies for analytics and reporting
all without needing to manually create and redirect to alternative URLs or run client-side scripts that swap content after a page loads.
Personalization with better performance and less effort
Personalization use cases like localization, internationalization, and custom authentication are possible to achieve with Next.js Middleware out of the box. But, in practice, achieving these use cases requires much more effort and custom code, either server-side or with JavaScript on the page.
What makes Netlify’s Next.js Advanced Middleware unique is that it removes development effort from the implementation in a way that also makes your end product faster and more performant. It’s a better developer experience while delivering an optimal end-user experience.
Next.js Advanced Middleware is only available on Netlify’s Next.js Runtime. And, when you run Next.js on Netlify you also get access to 30+ additional features that are unique to the Netlify platform, such as a GraphQL-powered API mesh for easily connecting new services, granular release management features for locking and prioritizing builds, and advanced serverless capabilities like background functions and scheduled functions.
Do more with Next.js today
Next.js is one of the most popular frameworks for developers, and we’re thrilled to push the developer experience forward, giving you new tools to achieve even more with the framework you know and love.
When you deploy any Next.js project to Netlify, that project will automatically deploy using the new Next.js Runtime. Learn more about the Next.js Runtime environment in the Netlify docs
If you’re ready to try out the new Next.js Advanced Middleware, follow the tutorial to learn how to rewrite HTML and transform page props. The tutorial includes a video, a step-by-step guide, and a live demo site you can play with to understand how it works.
