Article

Dynamic Without Limits: 2022 Next.js

4 min read

Published on 06 May 2024

Dynamic Without Limits: 2022 Next.js

How the new Next.js changes the game for developers

We at JAKALA (formerly FFW) are proud to have partnered with Vercel and honoured to have experienced one of the biggest and most exciting conferences this year. This year’s event brought big announcements about major newly released features that will impact the future of the web. 

Our attending JAKALA (formerly FFW) team members came home with a suitcase full of new learnings and inspiring conversations with community peers striving to push the boundaries of the web's future. 

If you couldn’t make it to this year’s event, here's a summary of our key takeaways:

The most anticipated release was Next.js 13, a redesigned approach to website layouts, data fetching, and server rendering. As part of the release, our partners at Vercel introduced a new game-changing tool: “Turbopack ”, a 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, which is designed from the ground up for incremental builds — both for development and production. 

Though everyone was buzzing about Turbopack, the developer community was incredibly hyped about its promise to make their daily lives easier. 

Using the Turbopack + Next.js 13 results in the following: 

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

Other Key Next.js 13 Releases

Even though Turbopack was a trendy topic, many other aspects of the new release garnered buzz and excitement among fellow attendees. 

Routing and Rendering Infrastructure

Next.js 13 delivers on the promise of shipping less client-side JavaScript while substantially improving developer experience by introducing a redesigned approach to routing, data fetching, and server rendering. 

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 making the Web faster and more dynamic. 

This new functionality was 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 for developers, including images, font, scripts, and social cards. 

The toolkit includes: 

  • Enhanced font support and functionality 
    The new built-in Next.js Font module makes working with custom and Google Fonts easier and provides support that makes third-party font content delivery networks (CDNs) a relic of the past. Developed in collaboration with Google, this mechanism shares zero information about website visitors and helps generate fallback fonts. It enables developers to avoid 99% of layout shifts and removes external network requests for improved privacy and performance. 

  • Enhanced image optimisation 
    Next.js 13 includes an update to the <Image> component, used by over 70% of the Next.js community. Building on updates to browser standards, the updated component can 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 optimised 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 five times faster than existing solutions using Vercel Edge Functions, WebAssembly, and a new core library for converting HTML/CSS into SVGs.
     

Final Takeaways: Overall Event Vibe

Simply put, Next.js has arrived. It isn’t exactly a ‘new kid on the block,' but it is a powerful technology that we at JAKALA (formerly FFW) have increasingly leveraged in headless solutions for our clients. This event felt like a significant statement that Next.js is no longer just a powerful but a niche tool — it will 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, JAKALA (formerly FFW) Technology Partnerships Solutions Consultant. 

The event imparted a palpable feeling of inclusivity and democratisation. Attendees consisted of a wide range of digital experts and developers from 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 democratisation of digital experience.  

How we empower control of your digital platform 

When considering technology partnerships, we constantly ask ourselves, “How can we best empower the organisations we work with?”. 

We believe every company should have complete control over operating and optimising its digital platform on its terms. This belief is a significant driver of our passion for headless solutions and the Next.js community. 

It 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 already leveraged the power of Vercel to affect major digital transformation for some of the world’s biggest brands, 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. 


Insights

Digital Experience Platforms: The New Frontier of Customer Engagement
Article

Digital Experience Platforms: The New Frontier of Customer Engagement

5 min read
Women in Drupal Award, Barcelona DrupalCon 2024!
Article

Women in Drupal Award, Barcelona DrupalCon 2024!

3 min read
What is Personalisation?
Article

What is Personalisation?

4 min read
Navigating Key Technical Decisions in a world of complex digital platforms
Article

Navigating Key Technical Decisions in a world of complex digital platforms

4 min read