Next.js 12.2 Release: Stable Middleware, On-demand ISR, and more

With the release of Next.js 12.2, the following new features arrive:

1. Stable
   • Middleware
   • On-demand Incremental Static Regeneration (ISR)
2. Experimental
   • Edge API Routes
   • Edge Server-side Rendering (SSR)
   • SWC Plugins
   • next/future/image
   • next/image remote patterns
3. Miscellaneous:
   • Vercel Edge Middleware for Next.js reaches the generally available stage (GA)

Middleware

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.

• Next.js middleware (GA) upgrade guide

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.

The Edge

Traditionally, the codebase 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.

Edge Middleware

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.

SWC Plugins

Now is available in an experimental stage. SWC, a Rust program, is used by the Next.js compiler to minify and compile your JavaScript code. With Next.js 12.2, SWC plugins can be used to improve your development experience and workflow.

Miscellaneous improvements to next/image

Disable next/image optimization

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.

Remote patterns

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.

Release next/future/image

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 developer news at The Dev Report, and 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 ❓
• JavaScript Promise Chaining - Avoid Callback Hell
• GitHub CLI in 3 minutes ❓

Also, don't forget to get in touch with me on Twitter at @hunghvu_dev!

---