我如何构建我的中型 NextJS 项目

众所周知，React 不是一个固执己见的库。这意味着它没有明确定义的做事方式，例如，React 不会强迫你以某种方式构建项目。一切交给开发者自己决定。

这里我们将使用 NextJS，它是一个基于 React 构建的框架。NextJS 通过代码拆分、图片优化、静态网站生成、服务端渲染等功能来优化我们的应用。本文将忽略所有这些精彩的功能，因为它们并非本文的重点。如果您是NextJS新手，我建议您查看其文档。

以下是我们的应用程序的高级文件夹结构。

📦src
 ┣ 📂charts
 ┃ ┣ 📜index.js
 ┃ ┗ 📜sunburst.js
 ┣ 📂components
 ┃ ┣ 📂breadcrumb
 ┃ ┃ ┣ 📂styles
 ┃ ┃ ┃ ┗ 📜breadcrumb.js
 ┃ ┃ ┗ 📜index.js
 ┃ ┗ 📜index.js
 ┣ 📂containers
 ┃ ┣ 📜index.js
 ┃ ┗ 📜navbar.js
 ┣ 📂fixtures
 ┃ ┗ 📜data.json
 ┣ 📂lib
 ┃ ┗ 📜gtag.js
 ┣ 📂pages
 ┣ 📂public
 ┃ ┣ 📂fonts
 ┃ ┃ ┗ 📂Arial
 ┃ ┣ 📂icons
 ┃ ┣ 📂images
 ┃ ┃ ┣ 📂svg
 ┃ ┣ 📂videos
 ┃ ┣ 📜manifest.json
 ┃ ┣ 📜sitemap.xml
 ┃ ┗ 📜sw.js
 ┣ 📂scripts
 ┃ ┗ 📜generate-sitemap.js
 ┣ 📂styles
 ┣ 📂utils
 ┣ 📜.env
 ┗ 📜next.config.js

是的，我知道这看起来有点复杂。让我们分别查看每个文件夹来揭开它的神秘面纱。

图表

通常，我的应用程序会有一些图表来可视化数据。我所有的图表都会放在这里，并从一个index.js充当“桶”的文件中导出。

成分

这可能是最有趣的文件夹，因为您将在其中花费大部分时间。对于我的组件中的每个组件，我都会为其创建一个单独的文件夹，并在该文件夹中创建一个index.js用于导出组件的文件，以及一个用于保存组件样式的单独文件夹。组件文件夹中还有一个index.js用于导出所有组件的文件。如果您随后想要导入某个<Button />组件，请执行以下操作：import { Button } from 'components'

容器

这个文件夹也很重要。组件就像原子一样，如果我们将这些原子组合起来，就形成了元素。例如，如果我们将链接、按钮和网格组件（原子）组合起来，就可以创建一个导航栏容器（元素）。这使得它更容易组合成UI。这些容器被导入到页面中，形成完整的网页。

固定装置

该文件夹包含一些静态数据，如所有链接的列表。

自由

此目录中的文件充当我们的应用程序和外部库（如 Google Analytics）之间的接口。

民众

此文件夹托管静态文件，如图像、字体、视频、站点地图、服务工作者等。

脚本

该文件夹包含一些我通常在构建时运行的脚本，例如生成站点地图。

样式

全局样式存储在此目录中。

实用程序

我希望在整个应用程序内共享的功能都存储在这个目录中。

希望本文对您有所帮助，如果您还有其他文件夹结构需要我查看，请告诉我。我很乐意尝试一下。

照片由Firos nv在Unsplash上拍摄