这个 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文件夹中。

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

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

Answer 1

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

细节我不太了解，但是NextJS在页面层面有优化。 当您构建 NextJS 项目时，您将看到作为构建一部分记录的页面。 NextJS 将pages文件夹下的每个组件文件都视为一个页面，因此通过将非页面组件放置在pages文件夹中，您将大大增加构建时间，因为现在 NextJS 将这些组件中的每一个构建为一个页面。

Answer 2

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

它的灵感来自 HackerNoon 的一篇关于如何构建 React 应用程序的文章

Answer 3

我喜欢这篇文章中提出的结构

https://medium.com/@pablo.delvalle.cr/an-opinionated-basic-next-js-files-and-directories-structure-88fefa2aa759

/root
  \_ /.next/
  \_ /components/
      \_ Button/
          \_ button.spec.jsx
          \_ button.styles.jsx
          \_ index.jsx
  \_ /constants/
      \_ theme.js
      \_ page.js
  \_ /contexts/
      \_ Locale/
         \_ index.js
      \_ Page/
         \_ index.js
  \_ /pages/
      \_ _app.jsx
      \_ _document.jsx
      \_ about.jsx
      \_ index.jsx
  \_ /providers/
      \_ Locale/
         \_ index.js
      \_ Page/
         \_ index.js
  \_ /public/
      \_ favicon.ico
      \_ header.png
  \_ /redux/
      \_ actions/
         \_ users/
            \_ index.js
         \_ products/
            \_ index.js
      \_ reducers/
         \_ users/
            \_ index.js
         \_ products/
            \_ index.js
      \_ store/
         \_ index.js
      \_ types/
         \_ index.js
  \_ /shared/
      \_ jsons/
          \_ users.json
      \_ libs/
          \_ locale.js
      \_ styles/
          \_ global.css
  \_ /widgets/
      \_ PageHeader/
          \_ index.jsx
  \
  \_ .eslintignore
  \_ .eslintrc
  \_ .env
  \_ babel.config.js
  \_ Dockerfile
  \_ jest.config.js
  \_ next.config.js
  \_ package.json
  \_ README.md

Answer 4

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

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

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

/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 6

现在最适合我的方法是仅将pages文件夹用于路由目的，每个文件中的组件只是src文件夹中“真实”页面组件的包装器。 使用这种方法，我可以更轻松地构建我的主页，并且感觉更直观 - 将布局及其子组件包含在同一文件夹中。

Answer 7

确保将仅后端文件与前端 + 后端文件分开

不管你给它们起什么名字，我都建议有两个语义非常清晰的目录：

• 仅后端目录：可以进行仅后端操作，例如直接数据库或文件系统访问（ require('fs') ）
• 前端 + 后端目录：仅限前端安全的东西。 由于 Next.js 是一个 SSR 设置，任何前端安全的东西也必须是后端安全的，所以你也可以从后端使用它们，例如共享配置或助手。

这很重要，否则您将开始遇到错误，例如：

找不到模块：无法解析“fs”

当使用 HoC 将事情分解出来时，正如在Module not found: Can't resolve 'fs' in Next.js application 中提到的，我不知道如何解决这个问题，除非通过明确明确的拆分。

也许这是常用的lib/ vs components/约定的预期语义，但我找不到明确的引用。

我更想叫他们back/和front/

默认情况下 ESLint pages/ 、 components/和lib/

这是我可以找到的components/和lib/的唯一明确的上游代码效果，如： https : //nextjs.org/docs/basic-features/eslint#linting-custom-directories-and-files （ pages/当然是神奇的，包含 URL 入口点，你显然不应该在那里放任何其他东西）：

默认情况下，Next.js 将为 pages/、components/ 和 lib/ 目录中的所有文件运行 ESLint。

在这种情况下，这并不重要，因为目录列表可以很容易地按照那里的文档进行配置。

Answer 8

没有正确的方法来定义您的结构。 这就是我定义的

• 源文件
  • 组件
    • layout.js --- components 文件夹内的组件，不止一个页面会用到这个组件
    • 模板 --- 特定页面的组件
      • 主页 -- 主页
        • article.js -- 文章组件
    • ui --- 样式组件，例如：按钮、标题、链接
  • 页
  • 风格
• 上市

Answer 9

我仅将 pages 目录用于路由目的。

这样你就可以保持一个干净的目录结构，并使组件靠近它们的父组件。

src
├── shared-components
│   └── ...
├── pages-components
│   ├── page-1
│   │   ├── index.tsx
│   │   ├── FooComponent.tsx  // page-1 specefic component
│   │   └── ...
│   └── home-page
│       └── index.tsx
└── pages                     // just for routing
    ├── page-1               
    │   └── index.ts          // export default from 'src/page-components/page-1'
    └── index.ts              // export default from 'src/page-components/home-page'

Answer 10

可能没有明确的方式来构建您的文件夹，这将再次取决于是什么让事情变得更容易。

这就是我通常构建应用程序的方式

pages/
├─ assets/
│   ├─ images/
│   ├─ icons/
│   └─ misc/
├─ components/
│   ├─ Buttons/
│   ├─ Cards/
│   └─ ...
├─ config/
│   └─ config.ts         //configuration constants such as ip,keys etc
├─ constants/
├─ contexts/             // all your context files
├─ helpers/              // any extra functions
├─ hooks/                // for intricate react hooks
├─ interfaces/           // for typescript interfaces
├─ layouts/              // for all layout files
├─ modules/              // if you develop each module seperately
├─ pages/          
├─ services/             // for all your api calls
├─ styles/

Answer 11

这就是我构建 next.js 文件夹的方式

原子设计模式

查看链接以解释所有内容： https ://dev.to/aliraza1603/atomic-design-methodology-with-react-and-typescript-1ac7

Answer 12

我更喜欢将与该页面相关的组件放在该页面的文件夹下。 components文件夹仅用于共享组件。

您可以在 next.config.js 中自定义pageExtensions属性。

module.exports = {
  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
}

通过以上配置（同样在官方示例中），只有扩展名为.page.jsx的文件才会被视为页面。

pages/
├─ about/
│   ├─ index.page.jsx
│   └─ components/
│       ├─ MainComponent/
│       │   └─ index.jsx
│       └─ FooComponent/
│           └─ index.jsx
│
├─ _app.page.jsx
├─ _document.page.jsx
└─ index.page.jsx

参考： next.config.js：自定义页面扩展 | 接下来.js