Why marketing technologists should join almost 1M developers in excitement about Next.js

After the Next.js Conf last week, we at Uniform could not be more excited about the latest updates from the Next.js team. Next.js 14 is out there focused on performance and simplicity, and this is what the community wanted - no new APIs.

With so much dev chatter about the latest Next.js developments, I thought I'd like to share my less technical perspective on why not just developers should be excited about this tech but also marketing technologists, who will unlikely spin up a new dev environment but are key benefactors of such technology choices that power the digital properties they work together with engineering teams on. It's time to get more folks onboard this train!

We use Next.js for pretty much anything front-end related. Our marketing website is on Next.js, our Uniform.app dashboard is powered by Next.js, and all our demos and Component Starter Kit are built with Next.js. So it's fair to say that we are heavily invested, and for a good reason.

What is Next.js in a nutshell?

If you haven't heard about Next.js, you have probably heard about React by now. Next.js is the "batteries included" open-source framework for React that adds all the missing pieces to the popular JS UI library, allowing developers to be more productive and spend much less time on tooling and plumbing. It is the most dominant React meta-framework, especially for large enterprise digital properties. Next.js is developed by a very talented engineering team at Vercel and is evolving quicker than driverless technology.

Key benefits

Since this post will not go into technical depth, I'd like to focus more on the key benefits that are easily translatable to business value.

Key benefit: Enabler for live preview and visual editing to delight your marketers and merchandizers

There is a good chance that if you are reading this, you may have a poor preview experience in your current headless CMS if any at all! Next.js has a preview capability in a form of a Preview Mode and Draft Mode that makes it easier to enable it.??

Your marketers are visual people who deserve a proper visual authoring environment. Preview is just a part of the problem. Complete experience authoring enterprise digital teams includes support for in-line or in-context editing and advanced layout management, global/shared content reuse, and connecting to multiple content sources, as well as integrated personalization and A/B testing of content.

Next.js hybrid model supports Server-side rendering as well as API routes, making it possible to implement the ultimate dream for your digital team.

To give you an example, at Uniform, we invested over three years into solving this problem and providing high-fidelity experience authoring with multiple content sources in mind as well as layout control, where business users can assemble experiences visually without a need to ask a developer to stitch it all together in code.

Key benefit: the personalization and A/B testing you always dreamt of

...without killing your Core Web Vitals...?

The challenge with DOM-based experience optimization tools like Google Optimize (RIP) is that they fight with React and similar Virtual DOM-based JavaScript technologies, like Vue.js. To do this right, we must dig into different ways you can render web experiences. You typically had two modes to do it: Static Site Generation (SSG) vs. Server-side Rendering (SSR). SSR gives you dynamic content for each visitor. SSG is baking a single version of a page for all visitors ahead of time. Let's ignore the client-side rendering since it wasn't an option for many.

So your IT folks had to navigate the following pros and cons before selecting an approach:

1. Static content (i.e. or no personalization or A/B testing) with SSG vs. dynamic content with SSR.

With Uniform edge personalization, you don't have to make that 1st choice when using the edge personalization for SSG mode.

2. Long site build wait times after publish with SSG vs. slower performance/scaling concerns and need for traditional servers with SSR.

Long site build times can be cut to a few seconds if you use incremental static regeneration (ISR), but it depends on where you deploy your site. While ISR is easy with Vercel, other platforms are still catching up…

Starting with Next.js 13 and the new App Router + React Server Components combo, your IT teams have one more option - to render the web experiences at the "edge" closest to the visitor, almost as fast as a static site but fully dynamic. This is the ultimate goal for serving the most dynamic and fast digital experiences at scale.

At Uniform, we recently re-imagined our Next.js SDK to support the new edge rendering mode and add component-level personalization and A/B testing to your Next.js app with ease, and we already have customers in production with this new approach.

Key benefit: build web experiences that are fast and stay fast

Performance means conversions, and this is not news already, but if you’d like to see some numbers, check out this article by Cloudflare. While there are many reasons for poor Lighthouse scores, the amount of JavaScript code your browser runs is often the most significant contributing factor and the most challenging to optimize.

Using a framework doesn't guarantee your web experience is fast. You can shoot yourself in the foot with any technology if you are not careful. Furthermore, I am not claiming that building with Next.js will give you the fastest site in the world. HTML + CSS is the way to do it, but we don't build enterprise sites that way anymore for a few good reasons :)

Building performant enterprise web experiences is getting easier and easier with Next.js, and the tooling helps developers detect any signs of suboptimal code. On top of that, the latest version of Next.js 13 allows developers to opt-out from client-side JavaScript when not needed, component by component, keeping the size of the codebase the browser needs to work with smaller.

Together with streamlined font loading, now it's easier to add a third-party library like GTM in the most performant way possible.

Performance is top of mind for the team that maintains Next.js and they collaborate with the Google Chrome team to push performance further. This investment helps your engineering team save hours of perf fine-tuning and finding creative ways to get to the "green" lighthouse score.

Key Benefit: Making it easier to focus on shipping great web experiences

There are web dev tools that make developers frustrated, and then the ones that make them happy and productive. Next.js is one of those tools elevating the level of dopamine in devs, and due to its adoption (850,000 monthly active developers), excellent documentation and ecosystem make mundane tasks a breeze.

Of course, there are always different camps and preferences, but since we are talking about the enterprise digital experience landscape here, I witnessed many instances of the "Next.js factor" having a positive impact on projects firsthand.

This means that your Engineering Management will have an easier time attracting and keeping top front-end talent, and in turn, means you get more stuff done. The resulting web experiences will feel more special, and your customers will appreciate it.

Summary

I hope that after reading this, you get a spark to talk to your teams about using Next.js. If you don't use it yet, get this ammo to the decision-makers in your org, since these benefits should be hard to ignore.

If you want to learn more about how we put Next.js to work for ambitious digital teams and how we power Visual Workspace with this technology, you can always request a demo from our digital experience experts.

We have an upcoming live stream on November 7th at 9:30 am Eastern, where we will show how to turn a hard-coded web experience into a fully managed one within Uniform's Visual Workspace, so join us for some fun!