Applying Atomic Design to your Next.js project

When starting a new project, CSS is easy to write. However, as the project grows in scale and the number of components, style sheets, and lines of code increases, CSS becomes a nightmare to maintain. Luckily, CSS methodologies create guidelines for writing modular, reusable, and scalable code.

There are a few popular methodologies, including Atomic Design, BEM, SMACSS, and OOCSS. In this article, we will focus on Atomic Design, learn its principles, and apply them to create a basic blog page in a Next.js application.

Jump ahead:

• What is Atomic Design in CSS?
• Creating the Next.js application
• Building a basic blog page in a Next.js application with Atomic Design
  • Creating the title atom
  • Setting up the navbar molecule
  • Making the table of contents molecule
  • Adding the author’s details molecule
  • Designing the blog content molecule
  • Building the blog container organism
• Creating the layout template for the blog page
• Bringing it all together on the page

Prerequisites

To follow along with this tutorial, you’ll need knowledge of Next.js, CSS, SCSS, and the Atomic Design methodology.

What is Atomic Design in CSS?

Atomic Design is a CSS methodology created by Brad Frost. It provides direction for creating scalable systems, reusable components, and design systems. Atomic Design was inspired by chemistry, which is why the building blocks are called atoms, molecules, organisms, templates, and pages.

Atoms are the smallest building blocks and are composed of HTML tags and HTML elements. Examples of atoms include inputs, buttons, and headings.

Similar to their chemical inspiration, Atomic Design’s molecules are a combination of atoms. For example, a form is a molecule because it combines the label, input, and button elements.

When we combine molecules or atoms, we get organisms. Organisms are groups of molecules and atoms joined to form relatively complex, distinct UI components and sections of an interface.

Continuing with the chemical theme, templates are made up of organisms. They are the structure of the content and are used to create a page’s layouts, blueprints, and wireframes.

Finally, pages are the final product. In the architectural world, for example, a template would be the blueprint of a building, and a page would be the completed building.

Creating a Next.js application

Now, let’s build the Next.js application.

First, create a new Next.js project by running this command in the terminal:

npx create-next-app atomic-next-app

Next, we navigate into the project directory:

cd atomic-next-app

We will use Sass for styling, so install that below:

npm install --save-dev sass

Then, run the command to start the application:

npm run dev

Using Atomic Design in Next.js

We will create a basic blog page with a navigation bar, a table of contents, blog content, and the author’s details. Our title will be the only atom we create, while the navbar, table of contents, author’s details, and blog content will be our molecules. The blog container will consist of those molecules and will be our organism. The structure of the blog should look like this:

The folder structure for the project should look like this:

Now that we’ve defined the atoms, molecules, organisms, templates, and pages, let’s create the components. You can use any component library, CSS processor, or tool. For this article, we will use Sass and CSS Modules.

Creating the title atom

We’ll set our blog page title using the title atom. As an atom, it will only have one h1 element. To create the title, add a components/Title.js file to the application’s root and paste this code:

import styles from "../../styles/title.module.scss";

export default function Title() {
  return (
    <h1 className={styles.blogTitle}>
      How to Monitor Your Frontend and Perform Product Analysis with LogRocket
    </h1>
  );
}

Then, for styling, add a title.module.scss file to the styles folder and enter the styles below:

.blogTitle {
  font-size: 2.5rem;
  font-weight: 500;
  margin-bottom: 1rem;
  display: inline-block;
}

Setting up the navbar molecule

The navbar molecule comprises the nav, an a HTML element, and Next.js’ Link component.

Create a components/Navbar.js file and paste the code:

import styles from "../../styles/navbar.module.scss";
import Link from "next/link";

export default function Navbar() {
  return (
    <nav className={styles.navbarContainer}>
      <Link href="#">
        <a>The Coolest Blog Ever</a>
      </Link>
    </nav>
  );
}

To edit the styling, add a navbar.module.scss file to styles and paste the styles below:

.navbarContainer {
  padding: 1.6rem;
  background-color: #8652ff;
  box-shadow: 0 4px 16px 0 rgba(41, 0, 135, 0.12);
  background-image: linear-gradient(150deg, rgba(99, 31, 255, 0.6), #8652ff);

  a {
    color: rgb(241, 235, 255);
    font-size: 2rem;
  }
}

Building the table of contents molecule in Next.js

Like the navbar molecule, this molecule consists of the nav, ul, the a HTML elements, and Link components.

To set it up, create a components/TableOfContents.js file and paste the code below:

import styles from "../../styles/tableOfContents.module.scss";
import Link from "next/link";

const TableofContentRoutes = [
  { label: "Introduction", href: "#" },
  { label: "Getting Started", href: "#" },
  { label: "What is LogRocket", href: "#" },
  { label: "How to Monitor Frontend with LogRocket", href: "#" },
  { label: "How to Perform Product Analysis with LogRocket", href: "#" },
  { label: "Why LogRocket is Awesome", href: "#" },
  { label: "Conclusion", href: "#" },
];

export default function TableOfContents() {
  return (
    <div className={styles.tableOfContentsContainer}>
      <h2>Table of Contents</h2>
      <nav>
        <ul>
          {TableofContentRoutes.map((route) => (
            <Link href={route.href} key={route.label}>
              <a>{route.label}</a>
            </Link>
          ))}
        </ul>
      </nav>
    </div>
  );
}

We created a TableofContentRoutes array in the code above with label and href. Then, we mapped through the TableofContentRoutes routes and rendered a link for each one.

Now, for styling, add a tableOfContents.module.scss file to styles and insert the styles:

.tableOfContentsContainer {
  ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    a {
      color: inherit;
      text-decoration: underline;
    }
  }

  @media (min-width: 768px) {
    width: 300px;
  }
}

Adding the author’s details molecule

The author’s molecule will contain the author’s image and name. In this tutorial, we will name our author John Doe. We’ll use the Image component and a span tag to set this up.

First, add an Author.js file to the components folder and insert the following code:

import styles from "../../styles/authorDetail.module.scss";
import Image from "next/image";

export default function AuthorDetail() {
  return (
    <div className={styles.authorDetailContainer}>
      <div className="img-box">
        <Image
          alt="Author's avatar"
          src="/author.jpg"
          width="50px"
          height="50px"
        />
      </div>
      <span>John Doe</span>
    </div>
  );
}

To edit the styling, add authorDetail.module.scss to styles and paste the styles below:

.authorDetailContainer {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;

  .img-box {
    position: relative;
    border-radius: 50%;
  }
}

Designing the blog content molecule

Next, we’ll set up the blog content molecule to house the blog’s texts, which are a collection of p tags. For this, add BlogContent.js to the components folder:

import styles from "../../styles/blogContent.module.scss";

export default function BlogContent() {
  return (
    <div className={styles.blogContentContainer}>
      <p>
        Eu amet nostrud aliqua in eiusmod consequat amet duis culpa dolor.
        Excepteur commodo proident aliquip aliquip fugiat ex exercitation amet
        velit. Mollit id cupidatat duis incididunt. Excepteur irure deserunt
        fugiat cillum id. Aliquip nulla pariatur sunt ex. Nulla id ut minim
        cupidatat laboris culpa laboris. Anim consectetur veniam ipsum
        exercitation ipsum consequat magna quis pariatur adipisicing.
      </p>
    </div>
  );
}

Now that we’ve set up the molecule for our text, we need to edit the styling. To do this, add a blogContent.module.scss file to styles and include the following code:

.blogContentContainer {
  p {
    margin-bottom: 1rem;
    font-size: 1rem;
  }
}

Building the blog container

We set up all of our blog page’s molecules in the steps above. To create the blog container organism, we will combine the Title, Author, and BlogContent components. For this, add a BlogContainer.js file to the components folder:

import Title from "../Atoms/Title";
import AuthorDetail from "../Molecules/AuthorDetail";
import BlogContent from "../Molecules/BlogContent";

export default function BlogContainer() {
  return (
    <div className="blog-container">
      <Title />
      <AuthorDetail />
      <BlogContent />
    </div>
  );
}

Here, we imported Title, AuthorDetail, and BlogContent and plugged them into BlogContainer. As you can see, no styling is required for this component. Now, we’ll build the layout template!

Creating the layout template with Atomic Design

The layout template is where we define the positioning of every other component on the page. To set it up, create a Layout.js file in the components folder:

import styles from "../styles/layout.module.scss";
import Navbar from "../components/Molecules/Navbar";
import TableOfContents from "../components/Molecules/TableOfContents";
import BlogContainer from "../components/Organisms/BlogContainer";

export default function Layout() {
  return (
    <div className={styles.layoutContainer}>
      <header>
        <Navbar />
      </header>
      <main>
        <aside>
          <TableOfContents />
        </aside>
        <article>
          <BlogContainer />
        </article>
      </main>
    </div>
  );
}

Here, we imported the Navbar, TableOfContents, and BlogContainer components and plugged them into the Layout component.

Next, for the styling, add a layout.module.scss to styles and paste the styles below:

.layoutContainer {
  main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.6rem;

    @media (min-width: 768px) {
      flex-direction: row;
      justify-content: space-between;
    }
  }
}

Finalizing the Next.js blog project

To finish up, we will put Layout  into the index.js file to create the page.

import Head from "next/head";
import Layout from "../components/Layout";

export default function Home() {
  return (
    <div>
      <Head>
        <title>The Coolest Blog Ever</title>
      </Head>
      <Layout />
    </div>
  );
}

With that, we have successfully applied the principles of Atomic Design to create a blog in Next.js. Our blog will look like this:

Conclusion

In this article, we applied the principles of Atomic Design to create the UI of a Next.js blog. By breaking web pages into separate components, Atomic Design prevents repetition and promotes consistency and scalability.

While we applied Atomic Design to a web development project in this article, its principles can also create design systems for UI/UX design.