How Next.js Empowers Developers Through Its Island Architecture
Developers can build responsive and dynamic applications with Next.js and Tailwind CSS. This hands-on article shows how to leverage the latest Next.js features.
![](https://heise.cloudimg.io/width/610/q85.png-lossy-85.webp-lossy-85.foil1/_www-heise-de_/imgs/18/4/6/2/6/7/0/7/shutterstock_1141252967-fa31e7f6fa567e88.jpeg)
(Bild: Nina Janesikova/Shutterstock.com)
- Marius Obert
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.
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):
(Bild: Marius Obert)
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.