Next.js 12.2 Release: Stable Middleware, On-demand ISR, and more
After months of waiting, Next.js finally releases several changes note-worthy changes with the 12.2 release.
With the release of Next.js 12.2, the following new features arrive:
- On-demand Incremental Static Regeneration (ISR)
- Edge API Routes
- Edge Server-side Rendering (SSR)
- SWC Plugins
- Vercel Edge Middleware for Next.js reaches the generally available stage (GA)
Released in October 2021 (Next.js 12.0) and has been in beta since then, Next.js Middleware is now stable. This release includes many breaking changes to the APIs. You can follow the migration guide below to upgrade.
On-demand Incremental Static Regeneration (ISR)
Released in February 2022 (Next.js 12.1) and has been in beta since then, Next.js On-demand ISR is now stable. This feature allows you to create and update static pages after build time down to the per-page level without taking down the whole page to rebuild. This is useful for dynamic content such as a blogging website with a headless CMS.
Traditionally, the code base is fully run on the origin servers. Depending on the location of the application servers (regional or multi-regional), user locations, and server configuration, the performance and latency can be an issue. With the lightweight Edge runtime, many components have been offloaded to the globally distributed Edge infrastructure (e.g., Content Delivery Network - CDN), which drastically improves user experience.
Edge API Routes
Now is available in an experimental stage, the Edge API Routes provide a faster startup time and lower latency. Being run on the Edge runtime, these API routes do not have access to native Node.js API (e.g. file IO), however, they are capable of using standard web APIs and streaming server responses.
Edge Server-side Rendering
Now is available in an experimental stage, the Edge Server-side rendering offloads a traditional task to the Edge infrastructure and greatly improves website performance and responsiveness. Combined with React 18, you can stream server-rendering pages at global scope or per-page basis.
Released in October 2021 (Next.js 12.0) and has been in beta since then, Edge middleware is now generally available. This framework-agnostic feature allows you to run middleware functions to modify requests before serving them to the Edge Network Cache (where the website content resides). With Edge Middleware, tasks such as authentication, localization, and more can be done at the Edge infrastructure.
Miscellaneous improvements to
Image optimization is required to be supported by the hosting environment. However, users now can disable the optimization while still using the
next/image component. This is very helpful for those who want to export a static page and host it on third-party infrastructure.
Now is available in an experimental stage. This feature allows you to use wildcards and define only remote images from certain domains to be optimized.
Now is available in an available stage. This is a preview of the upcoming
next/image component which is built to improve performance and solve the several pain points of the current version (mainly due to the opinionated nature when the component was first released).
Find more technology articles at hungvu.tech.
Interested in web development, GitHub Actions, and more? My other articles might be helpful to you!
- Advanced GitHub Actions - Conditional Workflow ❓
- GitHub CLI in 3 minutes ❓
Also, don't forget to get in touch with me on Twitter at @hunghvu_dev!