Cloud Native ComputingDevelopersNews

Vercel Launches Next.js 12 With Powerful New Middleware

Monika ChauhanBy 1251 views
vercel
0

Vercel has announced Next.js 12, the latest version of the React and JavaScript framework for frontend web development which builds on close collaboration with more than 1,800 contributors and the top companies on the Web, including Facebook and Google.

Next.js 12 introduces new middleware that gives developers the ability to rapidly personalize content and delivery, in addition to ES modules and URL imports, instant HMR and builds, and significant workflow and collaboration innovations.

“Next.js 12 is truly the first SDK for the Web, making developing, building, collaborating and shipping far faster and more reliable than anything that precedes it,” said Guillermo Rauch, CEO of Vercel and creator of Next.js.

With Next.js Middleware, developers have full flexibility to run code before a request is completed. Based on users’ incoming requests, developers can modify the response by rewriting, redirecting, adding headers, or even streaming HTML. Middleware can be used for anything that shares logic for a set of pages: authentication, bot protection, redirects, handling unsupported browsers, feature flags, a/b tests, server-side analytics, logging, and more. Deployed with Vercel’s Edge Functions, Next.js Middleware removes the remaining tradeoffs with serverless.

Additional new features in Next.js 12 include:

  • ES Modules and URL imports: With ES Modules support, Next.js can ship smaller bundles to users. The developer experience gets even better with the introduction of experimental URL Imports, enabling new kinds of seamless integrations with no code and design tools
  • Instant HMR and builds: The new Next.js 12 Rust-based compiler enables three times faster Fast Refresh and five times faster production builds, with zero code changes
  • Next.js Live (beta) enhancements: Next.js Live runs natively inside the web browser, boots up instantly and allows anyone with a link to collaborate
  • Server-side Rendering streaming and React Server Components (alpha): Users will be able to fetch data on the server-side, and stream those results to the browser incrementally with zero client-side JavaScript

You may also like