Overview of Next.js

Next.js, created by Vercel, is a framework for hybrid React applications. It is often difficult to understand all the different ways you might load content. Next.js abstracts this to make it as easy as possible. The framework allows you to build scalable, performant React code and comes with a zero-config approach. This allows developers to focus on building features.

Let us explore the Next.js features that are relevant to our discussion.

Basic Features

Pre-rendering

By default, Next.js generates the HTML for each page in advance and not on the client-side. This process is called pre-rendering. Next.js ensures that JavaScript code required to make the page fully interactive gets associated with the generated HTML. This JavaScript code runs once the page loads. At this point, React JS works in a Shadow DOM to ensure that the rendered content matches with what the React application would render without actually manipulating it. This process is called hydration.

Each page is a React component exported from a .js, .jsx, .ts, or .tsx file in the pages directory. The route is determined based on the file name. E.g., pages/about.js corresponds to the route /about. Next.js supports pre-rendering through both Server-Side Rendering (SSR) and Static generation. You can also mix different rendering methods in the same app where some pages are generated using SSR and others using Static generation. Client-side rendering may also be used to render certain sections of these pages.

Data Fetching

Next.js supports data fetching with both SSR and Static generation. Following functions in the Next.js framework make this possible.

1. getStaticProps: Used with Static generation to render data
2. getStaticPaths: Used with Static generation to render dynamic routes
3. getServerSideProps: Applicable to SSR

Static File Serving

Static files like images can be served under a folder called public in the root directory. The same image may then be referenced in the <Image> tag code on different pages using the root URL. E.g., src=/logo.png.

Automatic Image Optimization

Next.js implements Automatic Image Optimization which allows for resizing, optimizing, and serving images in modern formats when the browser supports it. Thus, large images are resized for smaller viewports when required. Image optimization is implemented by importing the Next.js Image component which is an extension of the HTML <Image> element. To use the Image component, it should be imported as follows.

import Image from "next/image";

The image component can be served on the page using the following code.

<Image src="/logo.png" alt="Logo" width={500} height={500} />

Routing

Next.js supports routing through the pages directory. Every .js file in this directory or its nested subdirectories becomes a page with the corresponding route. Next.js also supports the creation of dynamic routes using named parameters where the actual document displayed is determined by the value of the parameter.

For example, a page pages/products/[pid].js, will get matched to routes like /post/1 with pid=1 as one of the query parameters. Linking to these dynamic routes on other pages is also supported in Next.js

Code Splitting

Code splitting ensures that only the required JavaScript is sent to the client which helps to improve performance. Next.js supports two types of code splitting.

1. Route-based: This is implemented by default in Next.js. When a user visits a route, Next.js only sends the code needed for the initial route. The other chunks are downloaded as required when the user navigates around the application. This limits the amount of code that needs to be parsed and compiled at once thereby improving the page load times.
2. Component-based: This type of code splitting allows splitting large components into separate chunks that can be lazy-loaded when required. Next.js supports component-based code splitting through dynamic import(). This allows you to import JavaScript modules (including React components) dynamically and load each import as a separate chunk.

Getting Started with Next.js

Next.js can be installed on any Linux, Windows or Mac OS with Node.js 10.13 or later. Both automatic and manual set up options are available.

Automatic set up using create-next-app

npx create-next-app
# or
yarn create next-app

Once installed, you can run the development server and access pages on http://localhost:3000.

With this introduction to Next.js we can now look into the implementation of different patterns.