“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.”
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:
- 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.
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
“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.”
Vercel is the leading advocate and enabler of frontend developer experience, having created the best platform to deploy any frontend website or application, and Next.js, the most popular React framework. Vercel provides unsurpassed vertical integration, from developer experience to edge delivery, with the industry’s most advanced development tools paired with parallel compute in a serverless cloud environment providing a fully-managed, highly-automated experience for both developers and users. Companies including Facebook, Github, The Washington Post, Patreon, Uber, McDonald’s, Hashicorp, Carhartt, The GRAMMY’s and Santa Cruz deploy their frontends with the Vercel platform. Vercel (twitter @vercel) is headquartered in San Francisco.