Atomic Design was inspired by chemistry, which is why the building blocks are called atoms, molecules, organisms, templates, and pages. In this tutorial, we will focus on Atomic Design, learn its Create a components/Navbar.js file and paste the code. To edit the styling, add a navbar.scss file to styles andpaste the styles
Table of contents
PrerequisitesWhat is Atomic Design in CSS?Over 200k developers use LogRocket to create better digital experiencesCreating a Next.js applicationUsing Atomic Design in Next.jsCreating the title atomSetting up the navbar moleculeBuilding the table of contents molecule in Next.jsAdding the author’s details moleculeDesigning the blog content moleculeBuilding the blog containerCreating the layout template with Atomic DesignFinalizing the Next.js blog projectConclusionLogRocket : Full visibility into production Next.js appsSort: