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

Question

我们采用了以下项目结构

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

澄清一下，没有任何东西破裂，而且效果非常好。我们有在components目录中的多个页面中重用的组件，我们在其中导入如下

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

此外，仅使用一次的组件并排放在它的pages文件夹中。

我们现在面临的唯一问题是热模块重新加载被破坏，即每当我们在.jsx或pages目录中编辑components文件时，我们必须手动重新加载页面以查看受影响的更改（它不会影响CSS文件）。这是我们已经习惯的东西，因此不会严重影响我们。

我的问题是，是否有任何我们不知道的即将发生的灾难？

Answer 1

对于仍然对此感兴趣的所有人，我个人推荐这种方法，因为它有助于划分资源并允许快速查找事物和单元测试。

它的灵感来自HackerNoon关于How to structure your React app的一篇文章