Next.js 12 Is The SDK for the Web — Enabling Dynamic Web Sites at the Speed of Static

New cross-platform innovations including middleware increase speed to drive user and developer satisfaction

NEXT.JS CONF — Vercel, a comprehensive platform for creating unsurpassed web user experiences and creator of Next.js, announced Next.js 12 — The SDK for the Web — enabling development and delivery of dynamic web sites at the speed of static. The newest version of the leading React and JavaScript framework for frontend web development builds on close collaboration with more than 1,800 contributors and the top companies on the Web, including Facebook and Google, and is available for free. Next.js 12 introduces powerful 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.

“In ecommerce, better vitals mean better conversions, and these performance increases are both good for users and great for business,” said Guillermo Rauch, CEO of Vercel and creator of Next.js. “With Google now boosting site rankings as their Core Web Vitals improve, Next.js is not just making developers more productive, it’s accelerating business growth around the globe.”

Marketing Technology News: Bluewater Media Bolsters Digital Team with Hire of Executive Kristy Andreadakis

“In ecommerce, better vitals mean better conversions, and these performance increases are both good for users and great for business”

Next.js at the Edge — New Middleware and Edge Runtime

Next.js pioneered support for serverless deployments, gaining tremendous scalability and all but eliminating the operational burden from developers. 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. Edge Functions boot up instantly with no cold boots, deploy globally, and support streaming HTML. Edge Functions on Vercel eliminate lengthy routing configuration files and allow for powerful applications at the edge, with no burden on the client. This gives users the power of dynamic code with the speed guarantees of static.

Next.js Middleware and Vercel Edge Functions allow users to:

• Run JavaScript at the Edge before a request is processed
• Modify request responses by rewriting, redirecting, adding headers, and more
• Define the entire global infrastructure of their applications by adding a few pieces of code at deployment time

When developers define Next.js Middleware as part of their Next.js applications, Vercel deploys each Edge Function globally, by default. Unlike Serverless Functions, Edge Functions have no cold boots and run automatically in every region of Vercel’s Edge Network without any configuration. Vercel automatically optimizes Next.js applications for the best performance.

Marketing Technology News: MarTech Interview with Gavin Laugenie, Global Head of Content at dotdigital

Next.js 12: Optimized for Developer Experience

Additional new innovations 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

“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,” added Rauch. “With Next.js Middleware deployed to Vercel, the framework becomes aware of the global possibilities of the modern cloud, making websites more dynamic, personalized and performant for users. Code runs everywhere and gives developers the best of both worlds, whether static or dynamic, with one unified abstraction. Next.js 12 lays the foundation for the future of Web applications, and we can’t wait to see what users will create with it.”