关于Next/React项目结构设计的问题

Question

有关文件夹和文件的 next/react 结构的问题：

所以我有

mycomponents

文件夹，其中包含网页中每个部分的文件夹，例如，在该文件夹内有

projects

文件夹，其中有 2 个组件文件，第一个文件将从 api 提取的几个项目映射到

map()

函数并返回jsx，在地图内部，有一个

Modal

，第二个文件被调用

projectsModal.tsx

基本实现了各个项目的模式。

现在，第二个文件夹称为

sections

这个文件夹将用父 div 包装

mycomponents

内的文件夹之一中实现的任何内容，例如

sections

文件夹包含网页中每个部分的文件，有

projects.tsx

基本上将映射包装在父 div 中的

mycomponents/projects

文件中，如下所示：

<div id='parentDiv'>
<ProjectMap/>

在

section

文件夹中，有

main.tsx

将所有节文件组合在一起，然后

Main

组件在主

page.tsx

文件中渲染。

问题是：这是正确的方法吗？

另一个问题：我对单独文件中的某些div有类似的样式模式（我使用tailwind css），我想知道拥有一个在项目中导入样式组件的

UI

文件夹是否是一个好习惯，例如，这个基于运动的 div 被写入许多组件中：

<motion.div initial={{opacity:0,width:0}} whileInView={{opacity:1, width:100}}/>

我应该在

UI

文件夹中创建一个文件组件并将其导入到合适的部分吗？

Answer 1

文件夹结构：

Simplify folder names (mycomponents → components).
Consider merging components and sections where feasible, to reduce nesting.
Group reusable sections under a single folder (e.g., sections or layouts).

可重复使用的样式组件：

Create a UI or shared folder for reusable styled components like MotionDiv.
Use these components across your app for consistent behavior and styles.

定制版块：

If sections files are primarily layout wrappers, ensure they serve a meaningful purpose beyond just wrapping components in <div>.