Next.js: The Powerful React
Framework for Building Scalable
Web Applications

By Aatu Väisänen

5th September, 2022

Building the bridge between complicated websites and a great developer experience has been the driving force in recent advancements in the progress of web application frameworks. 

Web developers are always looking for more efficient ways to create optimized websites with great scalability and abundant configuration options. Next.js, a React framework for building fast web applications, has been a pioneer in this field since 2016, with new features coming out regularly.

This article covers the basic features and building blocks of Next.js with simple examples everyone can follow. We will not go into advanced technical details here, but if you need a brush-up of Next’s basic concepts, hop along.

In this post:

Understanding React: The Foundation of Next.js

To understand what Next.js is, we first need to introduce React, the most popular Javascript library in the world.

React provides useful functions that allow us to develop interactive user interfaces on the web easily. 

React is commonly referred to as a Javascript framework because it is commonly used in similar situations as Javascript frameworks like Vue or Nuxt.js. However, React is a Javascript library.

Unlike frameworks, a library gives the developer the freedom to choose when and where to use the functions included in the library. 

This level of freedom does mean that it requires quite a bit of effort to build a full-fetched React application, but it is perhaps why React is so popular and so commonly used as the basis of third-party frameworks like Next.js.

Did you know? Create React App (CRA) is React’s application framework that optimizes the setup of a React app with no minimal need for manual configuration.

What is Next.js?

Next.js is an open-source React framework for building fast, scalable, modern web applications. Developed and maintained by Vercel, it was first introduced in 2016 and has since become one of the most popular frameworks for web development.

Next.js is designed to provide developers with a seamless experience for building web applications by offering server-side rendering (SSR), static site generation (SSG), automatic code splitting, and easy integration with various third-party services. These features help improve performance, search engine optimization (SEO), and overall user experience.

By leveraging the power of the React JavaScript library and adding its own set of tools and conventions, Next.js simplifies the development process and allows developers to create web applications more efficiently.

It is an ideal choice for projects ranging from simple static websites to complex web applications and can be used for various use cases, such as Jamstack websites, web portals, minimum viable products (MVPs), single-page applications (SPAs), and eCommerce stores.

Next.js most essential concepts

Up next, we will cover the most important things needed in a modern web application, which Next.js conveniently provides out-of-the-box.

Routing

To put it simply, routing on a website is the process of determining what happens when a user visits a certain path on the site (meaning the part of the URL after the domain, so for example ikius.com/blog).

Routing in Next.js has been built around the concept of pages: the heart of a Next.js application lies in the ‘pages‘ directory – adding a file to the directory also makes it accessible as a route.

Here we have a ‘pages’ directory with one file in it, ‘index.jsx’, this is the home page of the website.

Now, let’s add a file called ‘about.jsx’ to create a route /about for the about page.

It’s that easy! Next.js handles all the hard work. Now we can navigate to the About page on our site by visiting the /about path.

This example was just a scratch on the surface of Next.js’s routing system, there are many more advanced things to consider. Read more about Next.js routing.

P.S.: A new routing system is upcoming for Next.js, read more about it here.

Data fetching and rendering

Every page on a Next.js project is a React component (.js, .jsx, .ts or .tsx file format). As we learned in the previous segment about routing, every page has a route formed on its file name.

Next.js pre-renders every page either using SSG or SSR. Pre-rendering allows reaching better performance and search engine optimization (SEO) because, with it, the HTML of every page can be served in advance instead of everything being handled by client-side Javascript. 

By default, every page in a Next.js project is pre-rendered using SSG, including the following example.

Let’s return to our example about page from the ‘Routing’ segment. So, it is accessed at /about. Inside the file could have something like:

function AboutPage() {
  return <div>About</div>;
}
export default AboutPage;

A page like this would be quite basic, as the content doesn’t have any external sources from which the data would be fetched – it just has an HTML div element with the word ‘About’ inside it. 

Usually, we’d like something easily editable from a content management system (CMS). 

Next, we’ll cover how to generate a Next.js page with external data using both SSG and SSR.

SSG

The HTML of a page that uses SSG is generated at build time with the command `next build`. The HTML here can then be reused on each request (and also cached by a content delivery network [CDN]).

Let’s say we would want a page title and a short site description. 

First, we would create values for these fields in a CMS. Then we could fetch the data from the CMS using the getStaticProps function and render it on the page like this:

function AboutPage({ title, description }) {
  return (
    <div>
      <p>{title}</p>
      <p>{description}</p>
    </div>
  );
}
// getStaticProps is only called at build time
export async function getStaticProps() {
  // call the external api of the CMS;
  const response = await fetch("https://.../aboutPageData");
  const about = await response.json();
  return {
    props: {
      title: about.title,
      description: about.description,
    },
  };
}
export default AboutPage;

That’s it! Now we would have a page with a title and a description fetched from the used CMS.

SSR

function AppleStockPage({ price }) {
  return <div>Apple stock price: ${price}</div>;
}
// this function is called on every page request
export async function getServerSideProps() {
  // fetch the stock price of Apple from an external API
  const response = await fetch("https://.../apple");
  const data = await response.json();
  return { props: { price: data.price } };
}
export default AppleStockPage;

So the only difference between using getServerSideProps (use for SSR) and getStaticProps (use for SSG) is that getServerSideProps gets called on every request, while getStaticProps is only called on build time.

Integrations

Using third-party services (CMS, authentication, payments, eCommerce etc.) is almost unavoidable in any serious NextJS application project.

With Next.js being one of the most popular React frameworks in the world, it’s not surprising how commonly available integration packages for different services are. 

For example, most of the headless CMS’ have their own NPM package for easy integration purely with React or comprehensively with Next.js (Dato CMS, Agility CMS, Contentful, Strapi etc…). Because of this, starting to use your favorite service with Next.js is a breeze.

Infrastructure

When building a website, you always need to think of where you want to deploy, store and run your application code. 

With Next.js you have many deployment options, such as a CDN of your choice, Serverless, Edge, Self-Hosting, and much more, but the easiest and fastest way to deploy your Next.js application is to use Vercel, the CDN was developed and maintained by the same company as Next.js (Vercel Inc.). 

By using Vercel, most of the more tedious stuff that’s related to deploying a NextJS application is automated (caching static optimization, asset compression, etc.), so you can focus on developing the site itself.

Benefits of Next.js

Business benefits

• Great for SEO: You can create an interactive application with all the desired functionalities with server-side rendering. The best part? It gives you SEO benefits without sacrificing any of your site's static content. This will help your content rank, give you more visibility in the search engines, and give you an excellent core web vitals score. 

• Fast performance: Using Next’s framework can enhance your application's performance and user experience by keeping your loading speeds under 3 seconds. This saves users time when they look at the content on your website before clicking away in frustration due to poor loading speeds or other factors that affect their ability to succeed while browsing your NextJS app sources.

• Good-looking URLs: Next.js is adding a new feature to make it easier and more customizable for developers who want their social media pages to boot up quickly. With this, you can programmatically customize open graph meta titles on each page. This will also improve SEO because search engines love clear content with keywords in its title.

Developer benefits

• Incremental Static Regeneration: Put simply, static generation makes your website load faster. This technique allows Next.js developers to update existing pages by re-rendering them in the background as traffic comes in, making your static content into dynamic content. 

• Solid community support: Even though React has a bigger community, Next.js community is huge and developers are always available to lend you a hand if you're stuck. 

• Easy to create API routes: Next.js leverages Node.js serverless function to create API routes easily and quickly.

What is Next.js good for?

• Jamstack websites: Next supports Jamstack architecture and modern websites, which makes it one of the best framework choices for building a Jamstack website.

• Web portals: Companies that need customer or employee portals can leverage NextJS to build a beautiful, functional web app. 

• Minimum viable products: Since Next.js allows for the fast creation of websites and apps, it’s a solid choice to get something up and running quickly and cost-effectively.

• Single page application: You can build fast SPAs using NextJS dynamic routing capabilities to render UI components. 

• Static websites: NextJS delivers snappy static websites using pre-rendering, generating all the HTML in advance to ensure blazing-fast loading speeds.

• eCommerce stores: It's easy to integrate Next.js with modern website-building practices and headless commerce platforms to deliver omnichannel shopping experiences.

Our work with Next.js

Headstart Dairy

We worked with URUS to build an interactive marketing site with Next.js. The site includes interactive SVG animations to support Headstart Dairy's storytelling when you scroll through the site.

Creating an animated site with large SVG files where almost every SVG has its own individual component would be nearly impossible with a legacy content management system such as WordPress. By using Jamstack and NextJs we created a site that works seamlessly on all devices.

Headstart Diary: Interactive marketing site for a global agriculture company

Olifant Digital

We worked with Olifant Digital to realize their vision for a highly optimized company site, polished to the tiniest detail. We optimized Olifant Digital's site to pass Google's Core Web Vitals and real experience score thresholds for multiple measurement tools. 

Once the content was fully modeled on DatoCMS, we started working on developing the frontend code with Next.js. Again, having a fully modeled headless CMS structure creates a foundation for efficient development.

Olifant Digital: Website development for a performance marketing agency

Summary

Next.js is a popular open-source frontend framework for developing server-side rendered (SSR) React applications. It's easy to use and well-supported, making it an attractive choice for web app development projects. 

To summarize, Next.js is a React framework that provides all the necessary features, tooling, and building blocks to create fully-fetched modern websites. Next.js only handles things like routing, data fetching, image optimization, etc., so you don’t have to.

Unlike some of its competitors, Next.js is not tied to a static-only approach which gives it lots of flexibility in many of its core concepts, such as image optimization. 

Next.js is more widely adopted than Gatsby and is often a better choice for Jamstack development projects. This is because it's less opinionated on how you'll source data, where you'll deploy your app, and how you'll build your project.

If you're looking for a robust framework that gives you the freedom to make decisions about architecture and deployment yourself, Next.js is the right choice for you.

If you're interested in Next, take a look at our Next.js development services to see how we can help you bring your project to life.