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 

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
      ・
　　　 ・
　　　 ・ 

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"

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 

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 

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.