Javascript 如何在Next.js应用程序中将页面组件分隔为多个`/pages`目录

我最近用Next.js开始了我的第一个项目，从那以后我的

页面

目录增长了很多。现在，我想将我的页面分开，并将它们分组到模块中，最后得到类似于

'src/modules/*/pages/*'

的内容

在研究这个主题时，我使用了accross

exportPathMap

，这是一个函数，我可以将它包含在我的

next.config.js

文件中，然后将自定义路径映射到我的页面，但似乎我需要为我创建的每个页面添加一个新路径，这并不理想。我想给Next一个表达式，类似于

'src/modules/*/pages/*'

，让它为我解析页面和路由（就像您在

或mconfig.json

文件中使用TypeORM时映射实体一样）

---

我想我可以将我的页面组件直接分组到

页面

，比如

页面/a-module/*

，但我也有组件、挂钩和其他逻辑，我想将它们分离到模块中。我也可以尝试使用Node的

fs

迭代我的项目文件结构并映射页面文件夹，但如果可能的话，我希望避免这种情况。

您可以使用符号链接。每个模块需要一个，但模块内的每个嵌套路径不需要一个。您的目录结构如下所示：

├── modules
│   ├── bar
│   │   └── pages
│   │       ├── first.js
│   │       └── second.js
│   └── foo
│       └── pages
│           ├── first.js
│           └── second.js
├── pages
│   ├── _app.js
│   ├── bar -> ../modules/bar/pages
│   ├── foo -> ../modules/foo/pages
│   ├── index.js

最终会有以下路线：

/bar/first
/bar/second
/foo/first
/foo/second

但我不确定这能给你带来什么，真的。现在，您的

模块

文件夹将与

页面

过去一样杂乱无章。您不必在

页面的文件中包含所有组件内容。它可以简单到：

// pages/foo/first.js
import FirstContent from '../../modules/FirstContent'

export default function First() {
  return <FirstContent />
}

//pages/foo/first.js
从“../../modules/FirstContent”导入FirstContent
首先导出默认函数（）{
返回
}
您可以使用符号链接。每个模块需要一个，但模块内的每个嵌套路径不需要一个。您的目录结构如下所示：

├── modules
│   ├── bar
│   │   └── pages
│   │       ├── first.js
│   │       └── second.js
│   └── foo
│       └── pages
│           ├── first.js
│           └── second.js
├── pages
│   ├── _app.js
│   ├── bar -> ../modules/bar/pages
│   ├── foo -> ../modules/foo/pages
│   ├── index.js

最终会有以下路线：

/bar/first
/bar/second
/foo/first
/foo/second

但我不确定这能给你带来什么，真的。现在，您的
模块
文件夹将与
页面
过去一样杂乱无章。您不必在
页面的文件中包含所有组件内容。它可以简单到：

// pages/foo/first.js
import FirstContent from '../../modules/FirstContent'

export default function First() {
  return <FirstContent />
}

//pages/foo/first.js
从“../../modules/FirstContent”导入FirstContent
首先导出默认函数（）{
返回
}
Next.js团队出于解释的原因和此处引用的文章中的原因，不允许这样做。
在决定是否真的要破解文件结构之前，您可以阅读一些讨论。
这是Next.js团队故意不允许的，原因已解释，并在此处引用的帖子中。
在决定是否真的要破解文件结构之前，您可以阅读一些讨论。
正如@Roman Mkrtchian提到的，您不应该这么做。我的建议是，如果您想像我一样将文件组织到模块中，请创建一个类似于此的文件结构：

src
├── modules
│    ├── foo
│    |   └── pages
|    |       ├── one
|    |       |   ├── index.jsx
|    |       |   └── styles.js <- For `styled-components`; could be a css file
|    |       └── two
|    |           ├── index.jsx
|    |           └── styles.js
|    └── bar
|        └── pages
|            └── three
|                ├── index.jsx
|                └── styles.js 
├── shared
└── ...

例如，在
src/pages/foo/one.jsx
内部，您可以导入
src/modules/foo/pages/one
，如下所示：

import OneContent from '../../modules/foo/pages/one';

const One = () => <OneContent />;

export default One;

从“../../modules/foo/pages/one”导入OneContent；
常数一=（）=>；
导出默认值；

是的，您仍然需要为在
/modules
中创建的每个页面创建一个新文件，但它可以避免您在处理下一个行为时遇到麻烦。
正如@Roman Mkrtchian提到的，您不应该这样做。我的建议是，如果您想像我一样将文件组织到模块中，请创建一个类似于此的文件结构：

src
├── modules
│    ├── foo
│    |   └── pages
|    |       ├── one
|    |       |   ├── index.jsx
|    |       |   └── styles.js <- For `styled-components`; could be a css file
|    |       └── two
|    |           ├── index.jsx
|    |           └── styles.js
|    └── bar
|        └── pages
|            └── three
|                ├── index.jsx
|                └── styles.js 
├── shared
└── ...

例如，在
src/pages/foo/one.jsx
内部，您可以导入
src/modules/foo/pages/one
，如下所示：

import OneContent from '../../modules/foo/pages/one';

const One = () => <OneContent />;

export default One;

从“../../modules/foo/pages/one”导入OneContent；
常数一=（）=>；
导出默认值；

是的，您仍然需要为您在
/modules
中创建的每个页面创建一个新文件，但这样可以避免您在处理下一个行为时陷入非常糟糕的境地。
符号链接可能在一定程度上有所帮助，但我认为我不会满足于此。经过一段时间的研究和思考，我得出结论，我想要的是一个麻烦，真的不值得。我将改变我的方法，保留
页面
目录，并以不同的方式组织事情。我将发布一个关于我做了什么以及为什么做的公式化答案，无论是谁，只要遇到这个问题，想做像我这样的事情。符号链接可以在一定程度上帮助你，但我认为我不会满足于它。经过一段时间的研究和思考，我得出结论，我想要的是一个麻烦，真的不值得。我将改变我的方法，保留
页面
目录，并以不同的方式组织事情。我将发布一个关于我做了什么以及为什么做的公式化的答案，无论谁遇到这个问题，都会想到像我这样做。