DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Yuki Kasugai
Yuki Kasugai

Posted on • Updated on

How to Organize the Files in the Components Practically in React and Next.js.

Do you know what is the most practical way to organize the directories and files in the component directory? While I was creating my portfolio site, I am curious about those. I searched some React repositories on GitHub and also asked my developer's friends about those so I will show you guys three ways.

The following file composition is my portfolio site app.

|_components
    |_Herosection
        |_herosection.jsx
        |_herosection.modules.css
    |_Navbar
    |_button

|_pages
    |_Home.jsx    
    |_Aboutme.jsx 
    |_Products.jsx 
    |_Articles.jsx 
Enter fullscreen mode Exit fullscreen mode

I created each component directly under the component directory and then created each jsx file and css file in it. (I created my portfolio site by using Next.js) I searched open-source React and Next.js website repositories on GitHub and some of them are very similar. Let's see the Drift website's file composition.

Pattern1

|_components
    |_admin
    |_app
    |_auth
        |_auth.module.css
        |_index.tsx
    |_badges
    |_button-dropdown
      ・
γ€€γ€€γ€€ ・
γ€€γ€€γ€€ ・ 
Enter fullscreen mode Exit fullscreen mode

This way has pros and cons.
pros; We can write the path of the file compactly when we use the component on each page file.

import Auth from "@components/auth"
Enter fullscreen mode Exit fullscreen mode

cons; It will be in alphabetical order in the components directory. If the app has dozen of components, it takes a little time to look for those and we can not see which components are common or not.
Website URL
GitHub
I also asked my developer's friends and they shows two ways.

Pattern2

|_components
   |_commons
     |_navbar
       |_navbar.jsx
       |_navbar.modules.css  
   |_utilities
     |_button
       |_button.jsx
       |_button.modules.css
   |_Home_components
     |_herosection
       |_herosection.jsx
       |_herosection.modules.css
   |_Aboutme_components
   |_Products_components
   |_Articles_components

|_pages
   |_Home.jsx    
   |_Aboutme.jsx 
   |_Products.jsx 
   |_Articles.jsx 
Enter fullscreen mode Exit fullscreen mode

The utilities directory includes minimal components which I use on all pages. The commons directory has components that are mixed with a couple of minimal ones. In addition, each page directory has components by themselves. But some friends said that the definition between utilities and commons depends on the people. If you work with other members, it has the possibility to hover between those. Let's see another way.

Pattern3

|_commonComponents
    |_navbar
        |_navbar.jsx
        |_navbar.modules.css 
    |_button
        |_button.jsx
        |_button.modules.css

|_pageComponents
    |_Home_components
        |_herosection
            |_herosection.jsx
            |_herosection.modules.css
    |_Aboutme_components
    |_Products_components
    |_Articles_components

|_pages
    |_Home.jsx    
    |_Aboutme.jsx 
    |_Products.jsx 
    |_Articles.jsx 
Enter fullscreen mode Exit fullscreen mode

There are two main types of component directories. (So far, pattern 1 & 2 have just one component directory.) It enables us to write the path of the file compactly and team members will not be confused.

Therefore, I prefer pattern 3. It is important to have a clear file composition that everyone can understand when I work as a developer with other team members in the future. However, I'm still wondering if it is the best way so I really appreciate it if you suggest me more practical way in the comment field.

Top comments (0)

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.