在開始專案之前，先熟悉整體的專案結構能幫助我們快速掌握檔案分工，無論是功能擴充或除錯，都能更有效率地找到正確的切入點。
開啟專案並使用 tree 看結構，會看到類似以下畫面：
.
├── README.md
├── app
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── components
│ └── animate-ui
├── components.json
├── eslint.config.mjs
├── lib
│ └── utils.ts
├── next-env.d.ts
├── next.config.ts
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
│ └── 靜態檔案
└── tsconfig.json
這邊我們主要需關注的檔案和資料夾如下：
| 檔案或資料夾 | 功能 |
|---|---|
app/layout.tsx |
整體佈局與共通 UI，全域設定（如字型、主題 UI、導入 globals.css、全站通用的 header、footer、側邊欄等佈局元素） |
app/page.tsx |
對應 /（首頁）的頁面內容，app/layout.tsx 中的 {children} 會顯示這頁元素渲染結果 |
components/animate-ui/ |
Animate UI 所提供的動畫元件 |
components/ui/ |
Shadcn/ui 所提供的元件 |
public/ |
靜態資源存放（Webp、SVG 檔等） |
components.json |
shadcn UI 所使用的設定檔，定義樣式風格、Tailwind 設定、TS/JS 選擇、別名等 (Components.json - Shadcn UI) |
lib/utils.ts |
常用函式工具（如 class 工具） |
next.config.ts |
Next.js 的主要構建與設定檔，可定義路由、環境變數、Webpack 設定等 |
tsconfig.json |
TypeScript 編譯設定，包含路徑別名(後面教學會再次提及到)、模組解析等 |
postcss.config.mjs |
PostCSS 的設定檔，作為 Next.js 編譯 CSS 用 |
package.json, package-lock.json |
記錄專案依賴 (dependencies)、名稱、版本、npm 執行 scripts |
eslint.config.mjs |
設置 ESLint，幫助開發者尋找和修復 TS/JS 程式碼的問題 |
這裡使用的是 Next.js 13+ 的 App Router，因此
app/資料夾內的layout.tsx和page.tsx。若使用 Page Router，可參考 Next.js Project Structure若想要更深入的了解 App Router / Page Router 差異，可參考 Heidi-Liu -【學習筆記】Next.js 路由系統：App Router vs Page Router
今天我們了解了 Animate UI / Shadcn UI 專案的結構，接下來會開始體驗 Animate UI 好玩的部分。
iThome鐵人賽
看影片追技術
看更多
