How I structure my mid-size NextJS projects

As you know React is not an opinionated library. What that means is that there is no clearly defined way of doing things, for instance, React doesn't force you to structure your projects in a certain way. All that is left for you the developer.

Here we are going to be using NextJS, which is a framework built on top of React. NextJS helps us by optimizing our app through code-splitting, image optimization, static site generation, server-side rendering, etc. In this article, we are ignoring all this awesomeness as it is not the focus of the article. I recommend looking at NextJs docs if you are new to it.

Below is a high-level folder structure of our app.

📦src
 ┣ 📂charts
 ┃ ┣ 📜index.js
 ┃ ┗ 📜sunburst.js
 ┣ 📂components
 ┃ ┣ 📂breadcrumb
 ┃ ┃ ┣ 📂styles
 ┃ ┃ ┃ ┗ 📜breadcrumb.js
 ┃ ┃ ┗ 📜index.js
 ┃ ┗ 📜index.js
 ┣ 📂containers
 ┃ ┣ 📜index.js
 ┃ ┗ 📜navbar.js
 ┣ 📂fixtures
 ┃ ┗ 📜data.json
 ┣ 📂lib
 ┃ ┗ 📜gtag.js
 ┣ 📂pages
 ┣ 📂public
 ┃ ┣ 📂fonts
 ┃ ┃ ┗ 📂Arial
 ┃ ┣ 📂icons
 ┃ ┣ 📂images
 ┃ ┃ ┣ 📂svg
 ┃ ┣ 📂videos
 ┃ ┣ 📜manifest.json
 ┃ ┣ 📜sitemap.xml
 ┃ ┗ 📜sw.js
 ┣ 📂scripts
 ┃ ┗ 📜generate-sitemap.js
 ┣ 📂styles
 ┣ 📂utils
 ┣ 📜.env
 ┗ 📜next.config.js

Yes I know, this looks a bit complex. Let's demystify it by looking at each folder separately.

Charts

Usually, my applications have some charts to visualize data. All my charts will be located here and exported from an index.js file that acts as a barrel.

Components

This is probably the most interesting folder because that's where you will spend most of your time in. For each component in my components, I create a separate folder for it, and in that folder I create an index.js file to export the component and a separate folder for the component styles. There is also an index.js file in the components folder that exports all the components. If you then want to import say a <Button /> component you will do it like so import { Button } from 'components'

Containers

This folder is also important. Components acts as atoms and if we combine those atoms we form elements. For example if we combine links, buttons and grids components(atoms) we can create a navbar container(element). This makes it easy to compose to UIs. These containers are imported in pages to form the complete webpages.

Fixtures

This folder contains some static data like a list of all links.

Lib

Files in this directory acts as an interface between our application and external libraries like google analytics.

Public

This folder host the static files like images, fonts, videos, sitemaps, service workers, etc.

Scripts

This folder contains some scripts that I usually run at build time like generation of sitemaps.

Styles

Global styles are stored in this directory.

Utils

Functions that I want to be shared across the whole application are stored in this directory.

I hope this article helped you, let me know if you have another folder structure that you want me to look at. I will be happy to try it out.

Photo by Firos nv on Unsplash