Building modern web apps with Next.js and Vercel

15 Mar 2024|Technology

At Futurice we love building. Our experience crafting digital experiences spans more than 20 years and the tools we use and cherish have changed a couple of times over the past decades. Building high-performing web applications has never been more satisfying than with the tools we now have at our disposal.

In particular, Next.js, a JavaScript framework from the creators of Vercel has been a favourite. After shipping a few projects using Next.js, including for Jagex and WRAP, we decided to partner with Vercel to show how much we value their view of building modern web apps. Let me walk you through what we love about building with Next.js and Vercel.

Choosing the right tools

When considering to (re-)build web applications for our clients, we take certain considerations into mind. We only suggest tools and stacks that we fully believe in and have tested thoroughly ourselves.

Developer experience is key, for our own people and also to ensure that future developers can have an enjoyable experience maintaining applications for our clients. In the last 8+ years we mostly opted for React, the popular JavaScript framework, due its popularity amongst talented developers and great community support. React has been great to build solid single-page client-side applications with a seamless experience for users.

Working with pure React in its early days presented several challenges, however. Client-side rendering (CSR) often resulted in slower initial page loads (often caused by slow server-client network waterfalls) and limited SEO options due to the lack of pre-rendered content. Data fetching required manual implementation, leading to boilerplate code and potential performance bottlenecks. Additionally, the absence of a built-in router necessitated the use of third-party libraries, adding complexity to the development process.

However, the emergence of modern frameworks like Next.js has revolutionised React development by introducing Server Components. These components pre-render on the server, significantly improving initial load times and SEO. Next.js also offers built-in data fetching capabilities and a robust routing system, streamlining the development process and enhancing the overall user experience. This shift towards server-rendered components addresses many of the historical pain points associated with pure React, and paved the way for a more performant and developer-friendly web development experience.

Next.js

Next.js is a powerful and versatile framework that offers compelling reasons to choose it for developing modern web applications. One of its key advantages is its built-in support for server-side rendering (SSR) and static site generation (SSG), enabling faster page loads and improved performance. This not only enhances the user experience but also contributes to better SEO results. Next.js integrates nicely with React, which means a familiar and efficient development experience for React developers. Its automatic code-splitting feature optimises the application’s bundle size, ensuring that only necessary code is loaded, resulting in faster load times. The framework also comes with an intuitive file-based routing system, simplifying the organisation of code and making navigation more straightforward. Additionally, Next.js supports a wide range of data-fetching strategies, including server-side data fetching and incremental static regeneration, offering flexibility in handling dynamic content.

Vercel

As a platform for deploying your web application Vercel streamlines web development by automating deployments and continuously integrating code changes. In its core functionality it is similar to other platforms like Netlify and Heroku, however it comes with seamless integration and optimization specifically for Next.js apps and a global edge network to deliver content with low latency worldwide.

Vercel offers zero-configuration deployment for Next.js apps and provides support for serverless functions and HTTPS certificate handling. You can also bundle and ship Next.js applications to the provider of your choice, but with additional integration and configuration effort. For us the simplicity and convenience outweigh the potential greater flexibility you can have with self hosting. Depending on your personal setup or company restrictions this might differ of course.

With its automatic deployment and continuous integration features, Vercel ensures that updates are deployed whenever changes are pushed to the repository, streamlining the development workflow. When integrated with GitHub, every Pull Request gets its dedicated preview environment which makes viewing changes especially for non-technical roles in our teams much easier.

Vercel’s collaboration features make it easier for development teams to work together, and I personally like the comment feature for preview deployments which easily allowed one of my designer colleagues to leave feedback directly on the page for me to investigate. In addition the integration with popular version control systems like Git and support for environment variables enhance the platform's flexibility and security.

One of Vercel’s unique selling points lies in its global edge network, an integrated Content Delivery Network (CDN) that caches content in strategic locations. This ensures content gets delivered with reduced load times, regardless of the user’s location. Especially when working with clients that have a global user base this offers a cost effective solution instead of configuring a separate CDN.

An exciting future ahead

The team around Guillermo Rauch (CEO of Vercel) is constantly working on expanding Vercel, and there are some recently released or announced features that we are particularly excited about:

AI SDK: An open-source library to build conversational streaming user interfaces using existing components from your applications
Partial Pre-rendering: This feature combines the benefits of fast static rendering and personalised dynamic rendering. It allows users to pre-render only the parts of the page that need to be personalised, while the rest of the page is statically rendered.
DX Platform: The new DX platform with monorepo support, code owners and conformance provides security at a glance and health reporting in one view. It allows users to manage their projects more efficiently and securely.
v0.dev: Vercel’s GenAI website builder that allows you to generate entire web interfaces including React component trees via single prompts.
Draft Mode: This feature enables cross-discipline collaboration by allowing users to comment and edit content in preview builds. It is a great way to get feedback from team members and stakeholders before publishing the content.

Outlook

Web development has been changing rapidly over the past decade and it most likely will transform even more within the upcoming years. No-code and low-code solutions will become more reliable and should have their place in the wide web dev ecosystem as they provide a low entry barrier platform for everyone to create impressive web experiences. Generative AI has proven its potential and tools like v0.dev are simply the beginning of allowing users to build their own custom web experiences with just a few prompts.

And on the other hand web applications need to become smarter as well, it’s not enough anymore to just optimise for SEO and consider simple personalization based on IP location. With the rise of GenAI and more sophisticated Customer Data platforms (CDPs) customers expect new products to tailor to their needs and provide a minimum of smart content as well as user-generated content. For those kinds of applications, the market for fully custom builds will still exist and tools like NextJS and Vercel ensure that they will be reliable, fast and enjoyable to build and iterate on.

If you want to get started – I recommend the Next.js interactive courses at Next.JS Learn where you’ll be guided to build your own full-stack e-commerce system. And if you’d like to discuss building something with Next.js and Vercel feel free to reach out to me directly.