Building Scalable UI Components with Atomic Design in Next.js

As a Next.js developer, you know how easy it is to write CSS code when starting a new project. However, as the project grows in scale and complexity, maintaining CSS code can become a nightmare. This is where Atomic Design comes in – a methodology that helps you create modular, reusable, and scalable UI components.

What is Atomic Design?

Atomic Design is a CSS methodology created by Brad Frost that provides direction for creating scalable systems, reusable components, and design systems. Inspired by chemistry, Atomic Design breaks down UI components into smaller building blocks called atoms, molecules, organisms, templates, and pages.

• Atoms are the smallest building blocks, composed of HTML tags and elements.
• Molecules are combinations of atoms that form more complex UI components.
• Organisms are groups of molecules and atoms that form distinct UI sections.
• Templates are structures that contain organisms and define the layout of a page.
• Pages are the final product, built using templates and populated with content.

Applying Atomic Design to a Next.js Blog

Let’s build a basic blog page with a navigation bar, table of contents, blog content, and author details using Atomic Design principles.

Step 1: Create the Title Atom

Create a Title.js file in the components folder and add the following code:

“`jsx
import styles from ‘../styles/title.module.scss’;

const Title = () => {
return

;
};

export default Title;
“`

Add a title.module.scss file in the styles folder and style the title component:

scss
.title {
font-size: 36px;
font-weight: bold;
margin-bottom: 20px;
}


Step 2: Build the Navbar Molecule

Create a Navbar.js file in the components folder and add the following code:

“`jsx
import Link from ‘next/link’;
import styles from ‘../styles/navbar.module.scss’;

const Navbar = () => {
return (

);
};

export default Navbar;
“`

Add a navbar.module.scss file in the styles folder and style the navbar component:

“`scss
.navbar {
background-color: #333;
padding: 20px;
text-align: center;

ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
        display: inline-block;
        margin-right: 20px;

        a {
            color: #fff;
            text-decoration: none;
        }
    }
}

}
“`

Step 3: Create the Table of Contents Molecule

Create a TableOfContents.js file in the components folder and add the following code:

“`jsx
import Link from ‘next/link’;
import styles from ‘../styles/tableOfContents.module.scss’;

const TableOfContents = () => {
return (

);
};

export default TableOfContents;
“`

Add a tableOfContents.module.scss file in the styles folder and style the table of contents component:

“`scss
.tableOfContents {
padding: 20px;

ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
        margin-bottom: 10px;

        a {
            text-decoration: none;
        }
    }
}

}
“`

Step 4: Build the Blog Content Molecule

Create a BlogContent.js file in the components folder and add the following code:

“`jsx
import styles from ‘../styles/blogContent.module.scss’;

const BlogContent = () => {
return (

);
};

export default BlogContent;
“`

Add a blogContent.module.scss file in the styles folder and style the blog content component:

“`scss
.blogContent {
padding: 20px;

p {
    margin-bottom: 20px;
}

}
“`

Step 5: Create the Author Details Molecule

Create an AuthorDetails.js file in the components folder and add the following code:

“`jsx
import styles from ‘../styles/authorDetails.module.scss’;

const AuthorDetails = () => {
return (

);
};

export default AuthorDetails;
“`

Add an authorDetails.module.scss file in the styles folder and style the author details component:

“`scss
.authorDetails {
padding: 20px;

img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 20px;
}

p {
    margin-bottom: 20px;
}

}
“`

Step 6: Build the Blog Container Organism

Create a BlogContainer.js file in the components folder and add the following code:

“`jsx
import Title from ‘./Title’;
import Navbar from ‘./Navbar’;
import TableOfContents from ‘./TableOfContents’;
import BlogContent from ‘./BlogContent’;
import AuthorDetails from ‘./AuthorDetails’;

const BlogContainer = () => {
return (