这种 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 目录，我们必须手动重新加载页面才能看到生效的更改（它不影响 CSS 文件）。这是我们已经习以为常的事情，因此不会对我们造成严重影响。

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

Answer 1

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

它的灵感来自 HackerNoon 在 How to structure your React app

上发表的一篇文章

Answer 2

我自己在为 NextJS 搜索合适的文件夹结构时偶然发现了这个 post。我一直在使用类似的结构，但最近发现这不是您应该如何使用 NextJS。

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

Answer 3

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

|-Nextjs-root
  |-Components
    |-Header.js
    |-Footer.js
    |-MoreExamples.js
  |-styles
   |-globals.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 4

我喜欢本文提出的结构

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

The only thing you must really be careful about is to not have anything under pages that aren't actual pages or API endpoints (e.g: tests, components, etc.), because there is no way to ignore them and Next will bundle and deploy them as actual pages.

Answer 6

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

Answer 7

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

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

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

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

Module not found: Can't resolve 'fs'

当用 HoC 分解问题时，如所述，我不知道如何解决这个问题，除非明确明确地划分。

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

我更想直接称它们为 back/ 和 front/

ESLint 默认 pages/、components/ 和 lib/

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

By default, Next.js will run ESLint for all files in the pages/, components/, and lib/ directories.

在那种情况下没关系，因为目录列表可以很容易地配置，如文档中所述。

Answer 8

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

来源
- 组件
  - layout.js --- components 文件夹内的组件，超过一页将使用该组件
  - 模板---特定页面的组件
    - home -- 主页
      - article.js -- 文章组件
  - ui --- 样式组件，例如：按钮、标题、Link
- 页数
- 样式
public

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

Is this Next.JS folder structure recommended?

javascript

project-management

reactjs

next.js