How Next.js Empowers Developers Through Its Island Architecture

JavaScript has always been instrumental in the world of web development. While initially developed to enable interactive websites, it started flourishing when client-side libraries such as jQuery were released and have dominated for over a decade now. With the release of Node.js in 2009, the technology was eventually introduced to the server side of web applications as well. However, a gap prevailed for a framework dedicated to crafting server-side rendered web applications. This gap was filled by Gatsby in 2015, which allows developers to build server-rendered React applications and gained a high popularity—but was eventually surpassed in user preference by Next.js, as the study "State of JavaScript 2022" showed.

Marius Obert

Marius Obert is originally from the Black Forest in Germany and started his software development career as a UI developer in sunny California. During that time, he learned to love web technologies like JavaScript in general and the entire Node.js ecosystem. After many ugly fights with CSS, he relocated to Munich, working as a Developer Evangelist at Twilio.

Next.js provides file-based routing and several other built-in functionalities, enabling developers to concentrate on resolving critical business problems. The most prominent feature of the framework is that code functions smoothly on both the client and the server. This systematic fusion of frontend and backend not only benefits the developer experience, but also improves performance and search engine optimization (SEO). This seamless integration of client-side and server-side rendering within a single framework is also referred to as "island architecture," as there can be client-rendered island components which are surrounded by a sea of server-rendered components.

This article will provide a guide to the most recent changes within the framework and explain them with corresponding code snippets.

Creating a New Project

Getting started with Next.js is a breeze. Make sure you have Node.js installed, which comes bundled with the terminal command npx, allowing the combined download and execution of npm packages in one step. Then you can quickly set up a new project by running the command npx create-next-app@latest.

The interactive prompt guides users through essential choices, including project name, TypeScript usage—a statically typed superset of JavaScript—, ESLint integration, Tailwind CSS inclusion, and the adoption of the recommended app router. Set the project name to heise-demo, and answer all other prompts with yes (Figure 1):

Start the local development server with npm run dev and visit http://localhost:3000.

Once the initial page is ready, it can be styled using Tailwind CSS. Tailwind CSS is a modern, highly intuitive, utility-first CSS framework that allows developers to design and construct elegant user interfaces efficiently. "Utility-first" means that instead of defining CSS rulesets, this development method uses utility or helper classes directly in the HTML code.

Beautifying the Initial Page With Tailwind CSS

The primary goal of utility-first CSS, and thus Tailwind CSS, is to accelerate the development process by allowing to apply styles directly without having to continuously switch between HTML files and CSS files. It follows the paradigm of using finely tuned, reusable utility classes and applying them directly in the markup.

This approach reduces many of the complications traditionally associated with CSS, such as clashing selectors, cascade issues, and overly specific rules. It leads to fewer CSS bugs and more consistency in user interface design by offering only a certain set of classes, and hence styles, to pick from. As a testament to its usefulness, Next.js offers to configure the project for Tailwind CSS during the bootstrapping process.

Now, let's experiment with Tailwind CSS's classes using the previously bootstrapped Next.js app. Replace the content of the src/app/page.tsx file with the code shown in Listing 1.

export default function Home() {
 const commonClasses =
   "flex w-1/2 h-1/2 items-center justify-center animate-pulse absolute";
 return (
   <main className="select-none">
     <div className={`${commonClasses} left-0 top-0 bg-red-400`} />
     <div className={`${commonClasses} right-0 top-0 bg-yellow-400`} />
     <div className={`${commonClasses} left-0 bottom-0 bg-green-400`} />
     <div className={`${commonClasses} right-0 bottom-0 bg-blue-400`} />
   </main>
 );
}

Listing 1: The page component, which is the foundation of this demo

This code uses 16 out of several thousand Tailwind CSS classes. The flex class immediately sets up a flex-box layout for the element, which significantly simplifies designing flexible, responsive layout structures. w-1/2 and h-1/2 classes designate each of the elements to consume half of the parent's width and height, respectively. Child nodes of an element styled with items-center and justify-center are aligned both vertically and horizontally at the center. The animate-pulse class applies a pulsing animation to the element, which can add some attractive dynamic to the design. The select-none class, which has been applied to the main tag, prevents any text or elements inside from being selected by the user.

absolute specifies that the positioned element should be taken out of the normal flow, and hence not take up space when considering the positioning of other elements. The positioning of each div is defined through the use of classes such as top-0, right-0, left-0, and bottom-0. These class combinations place the div in the top left, top right, bottom left, and bottom right corners of their parent element, respectively.

Finally, each div is also given a background color with bg-red-400, bg-yellow-400, bg-green-400, and bg-blue-400, wherein the numeric values define the tone of the color. This example illustrates the logic behind the naming of the classes, which allows developers with CSS experience to utilize them without having to learn new concepts.