这种 Next.JS 文件夹结构推荐吗？

|- pages
    |- <page_name>
        |- index.js             # To do a default export of the main component
        |- MainComponent.jsx    # Contains other subcomponents
        |- main-component.css   # CSS for the main component
        |- OtherComponents.jsx  # more than 1 file for child components that are used only in that page
        |- __tests__            # Jest unit and snapshot tests
|- components
    |- index.js                 # Exports all the default components of each component as named exports
    |- CommonCmpnt1
        |- CommonCmpnt1.jsx
        |- common-cmpnt-1.css
        |- index.js             # To default export the component
        |- __tests__
    |- CommonCmpnt2
        |- CommonCmpnt2.jsx
        |- common-cmpnt-2.css
        |- index.js             # To default export the component
        |- __tests__

需要澄清的是，没有任何东西损坏了，它的工作非常出色。我们有一些组件在组件目录中被多个页面重复使用，导入方式如下：

// Assuming we are inside MainComponent.jsx
// ...
import { CommonCmpnt1 } from '../../components';    // We even take it a step further and use absolute imports

此外，仅使用一次的组件位于其 pages 文件夹中。

我们现在唯一面临的问题是热模块重新加载已经失效了，即每当我们编辑 pages 或 components 目录中的 .jsx 文件时，我们必须手动重新加载页面以查看更改（不影响 CSS 文件）。这是我们习惯了的事情，所以并没有对我们产生严重影响。

我的问题是，是否存在我们不知道的任何迫在眉睫的灾难？