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

在为自己的NextJS寻找合适的文件夹结构时偶然发现了这篇文章。我一直在使用类似的结构，但是最近发现，不是这不是您应该使用NextJS的方式。

我对这些细节不太了解，但是NextJS在页面级别进行了优化。在构建NextJS项目时，您将看到页面记录是构建的一部分。 NextJS将class A: def method(self): pass @classmethod def classmethod(cls): pass @staticmethod def staticmethod(): pass class B(A): pass def function(): pass a = A() b = B() print_func(A.method) # A.method print_func(B.method) # A.method * print_func(a.method) # A.method print_func(b.method) # B.method print_func(A.classmethod) # classmethod A.classmethod print_func(B.classmethod) # classmethod B.classmethod print_func(a.classmethod) # classmethod A.classmethod print_func(b.classmethod) # classmethod B.classmethod print_func(A.staticmethod) # A.staticmethod print_func(B.staticmethod) # A.staticmethod * print_func(function) # function文件夹下的每个组件文件视为页面，因此通过将非页面组件放置在pages文件夹中，您将彻底增加了构建时间，因为现在NextJS可以将这些组件的每一个作为页面构建。

Answer 2

如果仍然有人感兴趣，我会根据项目中文件的类型来保存文件，例如：

|-Nextjs-root
  |-Components
    |-Header.js
    |-Footer.js
    |-MoreExamples.js
  |-styles
   |-globar.css
   |-header.module.css
   |-footer.module.css
  |-Services
    |-api              #Axios config to connect to my api
  |-Context
   |-AuthContext.js    #Global context to my app for auth purposes
  |-pages
   |-index.js

Answer 3

我喜欢本文提出的结构

Linked List

SELECT name, color
FROM POKEMON
GROUP BY name, color

Answer 4

这是我推荐的，使用模块化设计模式：

/public
    favicon.ico
/src
    /common
        /components
            /elements
                /[Name]
                    [Name].tsx
                    [Name].test.ts
        /hooks
        /types
        /utils
    /modules
        /auth
            /api
                AuthAPI.js
                AuthAPI.test.js
            /components
                AuthForm.tsx
                AuthForm.test.ts
            auth.js
    /pages
        /api
          /authAPI
              authAPI.js
          /[Name]API
              [Name]API.js
        _app.tsx
        _document.tsx
        index.tsx

我写了一篇关于它的文章：https://dev.to/vadorequest/a-2021-guide-about-structuring-your-next-js-project-in-a-flexible-and-efficient-way-472

<块引用>

唯一真正需要注意的是，页面下不能有任何不是实际页面或 API 端点的内容（例如：测试、组件等），因为无法忽略它们，Next 将捆绑并将它们部署为实际页面。

Answer 5

现在最适合我的方法是将 pages 文件夹仅用于路由目的，每个文件中的组件只是 {{ 1}} 文件夹。通过这种方法，我可以更轻松地构建我的主页，而且感觉更直观 - 将布局及其子组件包含在同一文件夹中。

Answer 6

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

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

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

6 个答案: