Next.js 資料夾結構規劃簡介

在透過 Next.js 開發專案的過程中，了解其資料夾結構無疑是提升專案管理與協作效率的關鍵因素。Next.js 作為 React 的擴展框架，以其獨特的資料夾結構自成一格，提供了優雅的文件組織方式。在本篇文章中，我們將針對 pages、public、styles 等主要資料夾，進行詳細剖析與說明。

Next.js 的靈魂之一便是其 pages 資料夾，這是一個專用資料夾，專責路由處理。每個 pages 資料夾內的檔案，都會自動對應到應用程式的路由，如 pages/index.js 轉換成 / 路徑。因此，能夠正確地組織 pages 資料夾內的檔案，對於專案的路由管理極為重要。例如：

// pages/about.js
export default function About() {
  return <div>這是關於我們頁面</div>;
}

通過這樣的設計，你可以輕鬆創建出一個新的路由頁面，而無需額外配置。

Next.js 提供了一個 public 資料夾，所有放在這裡的資源都可以在應用程式中直接通過基礎路徑訪問。public 資料夾通常用於存放靜態資源，如圖像、字體與其他不須經過 Webpack 處理的靜態文件，使得這些資源可以直接供使用者下載。範例：

假設有一張圖片 logo.png 存放在 public 資料夾中，可以如下方式在頁面中引用：

<img src="/logo.png" alt="網站標誌" />

Next.js 的 styles 資料夾用於存放全域或區域的樣式文件。設置樣式時，我們可使用 CSS 模組或 styled-jsx 來達成樣式分離並提升樣式管理的效率。使用 CSS 模組的範例：

styles/Home.module.css

.container {
  padding: 0 2rem;
}

在頁面中引用：

import styles from '../styles/Home.module.css';

export default function Home() {
  return <div className={styles.container}>歡迎來到首頁</div>;
}

優化專案結構不光是為了提高程式運行效能，同時也是為了提高團隊協作效率。透過清晰的資料夾結構與明確的規範，可以促進程式碼的可維護性與易讀性。同時，這也有助於提升協作時的利他性，讓每個團隊成員都能快速理解專案如何運行，並且迅速加入開發行列。

當我們開始一個新專案時，良好的資料夾結構規劃是一種良好開發習慣。建議透過以下步驟進行規劃：

1. 明確區分各功能模組。
2. 將頁面文件置於 pages 資料夾內，不特定每個頁面均為獨立檔案。
3. 盡量將重複出現的資源（如圖片、字型等）放置於 public 資料夾。
4. 將樣式根據功能分割，放置於 styles 資料夾，並考量 CSS 模組或 SCSS 的使用。

在規劃資料夾結構時，應避免的錯誤有：

1. 所有檔案放置於根目錄，無法快速定位。
2. 頁面、組件、樣式混雜，造成檢視與維護困難。
3. 靜態資源放置於非 public 資料夾，影響資源載入效能。
4. 沒有統一的命名規範，如同類型的檔案命名不一致，增加溝通成本。

在 Next.js 專案結構中，通常共用的功能或邏輯可以提取成獨立的模組或函數放置於 lib 或 utils 資料夾，這不僅提高程式碼的可再利用性，也確保不同功能模組之間的相對獨立性。例如，您可以將所有 API 調用邏輯集中在一個檔案中：

// utils/api.js
export async function fetcher(url) {
  const res = await fetch(url);
  return res.json();
}

範例中 fetcher 函數可在整個專案中重用，提升開發效率。

每個專案都有其獨特性，因此沒有一成不變的資料夾結構方案。然而，遵循上述建議，可以幫助您在不同專案中進行更有效的管理。下一步，應該針對團隊實際需求，進一步調整和優化結構，並不斷學習其他實際案例，把優雅的程式碼結構風格融入日常開發之中。

學習 Next.js 的資料夾結構，是通向高效率開發的必要步驟。希望從本文中所展示的範例和實戰技巧，能夠幫助新手工程師在使用 Next.js 開發專案時獲得靈感。透過持續地探索與調整，只有不斷地優化資料夾結構，才能夠真正迎接每一個新的挑戰。