Article cover image

Why Next.js is the best Composable framework right now

  • Claudio
    Claudio
    Director of Engineering

What is Next.js?

Next.js is a free and open source web application framework from Vercel for developing single-page Javascript applications. The benefits of the Next.js framework are numerous, for both ourselves and our clients.

Why do we use it?

As users, our expectations for digital platforms have become steadily more stringent. That is, when a website fails to load in milliseconds, we never fail to notice. Overwhelmingly, it's back-end technology decisions that play a huge part in the performance, scalability, and success of the end-product. And when the majority of users will spend less than 15 seconds on a webpage, and 47% of consumers expect a load time of 2 seconds or less (even on a slow 2G network), every moment counts.

As a composable-first agency, we aim to provide consistently fast and high-performing end-products to our clients. This would not have been possible without Next.js.

Image for Why Next.js is the best Composable framework right now

Next.js loves developers

Image Optimization

<Image> and Automatic Image Optimization with instant builds

Internationalization

Built-in Domain & Subdomain Routing and Automatic Language detection

Next.js Analytics

A true lighthouse score based on real visitor data & page-by-page insights

Zero Config

Automatic compilation and bundling; optimized for production from the start

Hybrid: SSG and SSR

Pre-render pages at build time (SSG) or request time (SSR) in a single project

Incremental Static Regeneration

Add and update statically pre-rendered pages incrementally after build time

TypeScript Support

Automatic TypeScript configuration and compilation

File-system Routing

Every component in the pages directory becomes a route

API Routes

Optionally create API endpoints to provide backend functionality

Fast Refresh

Fast, reliable live-editing experience, as proven at Facebook scale

Built-in CSS Support

Create component-level styles with CSS modules. Built-in Sass support

Code-splitting and Bundling

Optimized bundle splitting algorithm created by the Google Chrome team

Image for Why Next.js is the best Composable framework right now

Next.js features that make your life easier

Improved Core Web Vitals score

Starting May 2021, your Core Web Vitals score will become a ranking factor in Google search results. That means that poorly-scoring websites will slide down Google search results, while high-performing websites will rise up above their competition. Learn more about Google Core Web Vitals or test your website using Google's free tool.

The good news: Next.js optimizes your site for you with automatic image resizing. You get all green, all the time — with little to no effort. Check out our blog on Core Web Vitals for more information.

Leverage serverless API Routes

API routes provide a solution to build your API with Next.js. For new projects, you can build your entire API with API Routes. If you have an existing API, you do not need to forward calls to the API through an API Route.

Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page. They are server-side only bundles and won't increase your client-side bundle size. Vercel and Next.js take care of everything, from resource management to deployment, and store it in the Cloud.

Some distinct advantages of this serverless API include:

  • It only runs when called, reducing load
  • Resources are scaled according to your needs – so you don't have to worry if your API will resist x100 usage
  • Opportunities for configuration are extensive; for example, you can deploy your API from a GitHub repository

Faster builds with incremental static regeneration

Next.js allows you to create or update static pages after you’ve built your site. Incremental Static Regeneration (ISR) enables you to use static-generation on a per-page basis, without needing to rebuild the entire site. With ISR, you can retain the benefits of static while scaling to millions of pages.

When a request is made to a page that was pre-rendered at build time, it will initially show the cached page.

Any requests to the page after the initial request and before 10 seconds are also cached and instantaneous.

After the 10-second window, the next request will still show the cached (stale) page

Next.js triggers a regeneration of the page in the background.

Once the page has been successfully generated, Next.js will invalidate the cache and show the updated product page. If the background regeneration fails, the old page remains unaltered.

When a request is made to a path that hasn’t been generated, Next.js will server-render the page on the first request. Future requests will serve the static file from the cache. In addition, Fast Refresh ensures that most edits are visible within a second.

Image for Why Next.js is the best Composable framework right now

Are you still here? Go!