Applying Atomic Design to your Next.js project
Tags: nextjs, webdev
Published: 2022-10-13 16:31:57

**Written by [Nefe James](https://blog.logrocket.com/author/nefejames/)✏️**

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](https://blog.logrocket.com/tag/nextjs/) application. 

_Jump ahead:_

*   [What is Atomic Design in CSS?](#what-atomic-design-css)
*   [Creating the Next.js application](#creating-next-js-application)
*   [Building a basic blog page in a Next.js application with Atomic Design](#building-basic-blog-page-next-js-application-atomic-design)
    *   [Creating the title atom](#creating-title-atom)
    *   [Setting up the navbar molecule](#setting-up-navbar-molecule)
    *   [Making the table of contents molecule](#making-table-of-contents-molecule)
    *   [Adding the author’s details molecule](#adding-authors-details-molecule)
    *   [Designing the blog content molecule](#designing-blog-content-molecule)
    *   [Building the blog container organism](#building-blog-container-organism)
*   [Creating the layout template for the blog page](#creating-layout-template)
*   [Bringing it all together on the page](#bringing-all-together-page)

## Prerequisites

To follow along with this tutorial, you’ll need knowledge of Next.js, CSS, SCSS, and the [Atomic Design methodology](https://blog.logrocket.com/atomic-design-react-native/).

## What is Atomic Design in CSS? <a name="what-atomic-design-css">

Atomic Design is a CSS methodology created by [Brad Frost](https://bradfrost.com/blog/post/atomic-web-design/). 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 <a name="creating-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:

```shell
npx create-next-app atomic-next-app
```

Next, we navigate into the project directory:

```shell
cd atomic-next-app
```

We will use [Sass](https://sass-lang.com/install) for styling, so install that below:

```shell
npm install --save-dev sass
```

Then, run the command to start the application:

```shell
npm run dev
```

## Using Atomic Design in Next.js <a name="building-basic-blog-page-next-js-application-atomic-design">

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: ![Layout of a blog post in a Next.js application using Atomic Design](https://blog.logrocket.com/wp-content/uploads/2022/10/next-js-application-atomic-design-blog-example.png) 

The folder structure for the project should look like this: ![Next.js File Structure in an Atomic Design Project](https://blog.logrocket.com/wp-content/uploads/2022/10/next-js-file-structure-atomic-design-project.png) 

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](https://blog.logrocket.com/a-deep-dive-into-css-modules/).

## Creating the title atom <a name="creating-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:

```javascript
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:

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

## Setting up the navbar molecule <a name="setting-up-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:

```javascript
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:

```css
.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 <a name="making-table-of-contents-molecule">

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:

```javascript
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:

```css
.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 <a name="adding-authors-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:

```javascript
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:

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

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

## Designing the blog content molecule <a name="designing-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:

```javascript
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:

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

## Building the blog container <a name="building-blog-container-organism">

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:

```javascript
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 <a name="creating-layout-template">

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:

```javascript
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:

```css
.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 <a name="Finalizing the Next.js blog project">

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

```javascript
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: ![Basic Blog Page Created Using Atomic Design in a Next.js Project](https://blog.logrocket.com/wp-content/uploads/2022/10/final-next-js-blog-atomic-design.png)

## 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.

---

## [LogRocket](https://logrocket.com/signup): Full visibility into production Next.js apps

Debugging Next applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try [LogRocket](https://logrocket.com/signup). 

[![LogRocket signup](https://blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png)](https://logrocket.com/signup)

[LogRocket](https://logrocket.com/signup) is like a DVR for web and mobile apps, recording literally everything that happens on your Next app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your Next.js apps — [start monitoring for free](https://logrocket.com/signup).