如何設置 Next.js 專案結構

Next.js 是一個很好的工具，它能為我們的 React 應用提供許多內建的功能，這些功能在 Web 應用程式中至關重要。

它只為我們的專案文件提供了一點點結構。

所有可見的頁面都放在 /pages 資料夾下。
API 路由則放在 /pages/api 資料夾下。
公開可見的文件放在 /public 資料夾下。

基本上就是這樣。其他的結構都由我們來定義。

我通常會這樣做。

所有頁面需要的 React 元件都放在 /components 資料夾下。

我通常有一個 /components/Common 資料夾，然後根據頁面結構重新創建資料夾：

…以此類推。

然後我有一個 lib 資料夾，其中包含所有被 React 元件或 API 路由使用的工具程式。這可能是資料獲取、庫初始化、Prisma 設置、資料庫存取、SWR 的請求器、easy-peasy store 等等，基本上任何在任何地方都可以重複使用的東西，但卻不是元件。

我也確保可以這樣引入它們：

1 2	import comp from components/Common/comp import x from lib/x

使用 jsconfig.json 中的以下設定進行設置：

{
 "compilerOptions": {
 "baseUrl": "."
 }
}

我提到了我常常使用的 Prisma。這將需要它自己的 /prisma 資料夾，用於存放模式和遷移，如果需要的話，還可以有一個 SQLite 數據庫。

如果網站有內容（例如 Markdown），我會新增一個 /content 資料夾。

對於中間件（有時很有用），可以考慮使用 /middleware 資料夾，但這是相當少見的。

這樣的結構對於幾乎所有你需要的東西都能正常運作。

tags: [“Next.js”, “React”, “project structure”, “folder structure”]