At Futurice, we are passionate about building. With over 20 years of experience in creating digital experiences, we have seen our tools evolve over the decades. We find building high-performing web applications incredibly satisfying with the current tools 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 to 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.
Top comments (2)
Great work
thanks alot