Dynamic Without Limits: 2022 Next.js Event Recap

December 2nd, 2022

This year’s Next.js Conference certainly delivered on the hype leading up to it. We at FFW are proud to be partners with Vercel, and honored to have experienced what has been one of the biggest and most exciting conferences this year. This year’s event brought big announcements about major just-released features that will impact the future of the web.

Our attending FFW team members learned and experienced so much at the event, and had inspiring conversations with so many others in this community who are striving to push the boundaries of the future of the web.

If you couldn’t make this year’s event, here's a summary of our major takeaways.

Of course, the major news of the event was about the Next.js 13 release, which represents a redesigned approach to website layouts, data-fetching, and server-rendering. There was no shortage of exciting updates from the event that got us and all attendees buzzing. Turbopack was one of the most-talked about.

 

“See ya, WebPack. Hello TurboPack!”

As part of the Next.js 13 update announcement, our partners at Vercel introduced the new game-changing tool, “Turbopack,” a new Rust-based successor to Webpack. Webpack has been downloaded over 3 billion times and has become an integral part of the Web. Built with the creator of Webpack, Turbopack is a brand new bundler for JavaScript and TypeScript codebases, written in Rust. Designed alongside the team behind Turborepo, Turbopack is the first and only build system for JavaScript and TypeScript designed from the ground up for incremental builds—both for development and production.

Though everyone was buzzing about Turbopack, the developer community in attendance were the most hyped. They were excited about the promise of Turbopack making their daily lives so much easier.

Using the Turbopack +  Next.js 13 results in:

  • 700x faster updates than Webpack
  • 10x faster updates than Vite
  • 4x faster cold starts than Webpack

Other Key Next.js 13 Releases

Though TurboPack was an especially popular topic, not to be outdone, there were many other aspects of the new release that garnered buzz and excitement among fellow attendees.

 

Routing and Rendering Infrastructure

Introducing a redesigned approach to routing, data-fetching, and server-rendering, Next.js 13 delivers on the promise of shipping less client-side JavaScript while also delivering substantial developer experience improvements. 

Next.js and Vercel are the first to bring React Server Components, data fetching for Suspense, and support for hybrid, nested layouts to a major JavaScript framework, leading the industry with their innovative approach to make the Web faster and more dynamic. 

This new functionality has been designed in tandem with advancements in the Vercel infrastructure, including support for streaming across our entire serverless compute stack, Edge API Routes and Rendering, and new caching strategies.

Developer Toolkit

Next.js 13 also includes updates to components and modules within the Next.js toolkit that make some commonly used and necessary parts of websites faster, easier, and more reliable to get right for developers, including images, font, scripts, and social cards.

This will include:

Enhanced font support and functionality: 

The new built-in Next.js Font module makes it easier to work with custom and Google Fonts, as well as provide support that makes third-party font content delivery networks (CDNs) a relic of the past. Developed in collaboration with Google, usage of Google Fonts through this mechanism now shares zero information about website visitors with Google. It also helps generate fallback fonts, enabling developers to avoid 99 percent of layout shifts and removes any external network requests for improved privacy and performance.

Enhanced image optimization: 

Next.js 13 includes an update to the <Image> component, used by over 70 percent of the Next.js community. Building on updates to browser standards, the updated component is able to delegate more to the browser for reduced overall costs, due to its ability to store computed images at the edge. When deployed to Vercel, the Image component is automatically stored and optimized on the Vercel Edge Network for even better performance.

Instant Open Graph (OG) Image Generation: Vercel’s OG Image Generation is a new library for generating dynamic social card images. This approach is 5 times faster than existing solutions by using Vercel Edge Functions, WebAssembly, and a brand new core library for converting HTML/CSS into SVGs.

 

Final Takeaways: Overall Event Vibe

Simply put, Next.js has arrived. Next.js isn’t exactly a ‘new kid on the block’, and is a powerful technology that we at FFW have increasingly leveraged in headless solutions for our clients. But this event felt like a major statement that Next.js is no longer a powerful but niche tool. Rather, that Next.js has arrived, and it’s going to change the game.

Next.js is becoming a go-to for front-end javascript framework, with increasingly powerful and broad interactions with other technologies.

-Jon Bauer, FFW Technology Partnerships Solutions Consultant.

The event overall imparted a palpable feeling of inclusivity and democratization. Attendees consisted of a wide swath of digital experts and developers from countries all over the world, representing companies from start-ups to Fortune 500 enterprises. Perhaps this, along with the announced advancements of Next.js offerings, is representative of the democratization of digital experience. 

 

How we empower control of your digital platform

When we consider technology partnerships, we constantly ask ourselves, “how can we best empower the organizations we work with?”.

We believe every company should have complete control, operating and optimizing their digital platform on their own terms. This belief is a major driver of our passion for headless solutions, and the Next.js community.

This belief is also a recognition of our partners at Vercel, and our ability to leverage their technologies for our clients, combining the agility of an all-in-one web platform with the power of a best-of-breed technology stack.

We’ve leveraged the power of Vercel to affect major digital transformation for some of the world’s biggest brands, and empowering exponentially increased control for their teams, and setting the foundation for true digital scalability. 

 

The boldest ideas start with a single conversation.

Let's start ours.

 

 

AUTHORS:

Alex Arnaut, FFW Director, Services Enablement

Jon Bauer, FFW Solutions Consultant, Technology Partnerships

Cookie