# Next.js 專案環境建置 (VS Code)

> 這份筆記用於快速設定 Next.js 開發環境，主要包含 **VS Code** 與 **Node.js**。

## 1. VS Code (程式碼編輯器)

* **用途**：我們主要的程式碼編輯器。
* **下載**：前往 [VS Code 官方網站](https://code.visualstudio.com/) 下載並安裝。

## 2. Node.js (JavaScript 運行環境)

Next.js 是基於 Node.js 建立的，因此必須安裝它。

* **用途**：提供 JavaScript 運行環境以及 `npm` (Node 套件管理器)。
* **下載**：
1. 前往 [Node.js 官方網站](https://nodejs.org/)
2. **重要**：請務必下載並安裝 **LTS** (Long-Term Support) 版本，這是最穩定、受長期支援的版本。

### 驗證安裝

安裝完成後，我們需要確認 `node` 和 `npm` 是否都已成功安裝。

1. 打開你的終端機 (Terminal)。
* (在 VS Code 中，也可以透過頂部菜單的 `Terminal` -> `New Terminal` 打開)
2. 輸入以下指令來檢查 **Node.js** 版本：

    node -v

3. 輸入以下指令來檢查 **npm** 版本：

    npm -v

4. 如果你都看到了版本號 (例如 `v20.11.0` 和 `10.2.4`)，即表示環境建置成功！

## 3. 建立 Next.js 專案

> 我們將使用 `create-next-app` 這個官方工具來快速建立專案，並完成所有重要設定。

### 開啟終端機

1. 打開 **VS Code**。
2. 在 VS Code 頂部菜單選擇 `File` -> `Open Folder...`，然後選擇一個你打算存放所有專案的資料夾（例如 `桌面` 或 `文件`）。
3. 在 VS Code 頂部菜單選擇 `Terminal` -> `New Terminal`，下方會出現終端機視窗。

### 執行建立專案指令

在 VS Code 的終端機中，輸入以下指令：

npx create-next-app@latest

### 回答安裝問題 (重要)
---------------

執行指令後，系統會詢問你一系列問題。**請務必依照以下建議選擇**，以符合我們「JavaScript + Tailwind CSS」的專案需求。

---

- `What is your project named?` (你的專案名稱？)

- ➡️ 輸入 `todo-list-app`

- `Would you like to use TypeScript?` (你要使用 TypeScript 嗎？)

- ➡️ **No**

- > **!! 關鍵步驟：** 這裡選擇 `No`，專案才會使用 JavaScript (`.js` / `.jsx`)。

- `Would you like to use ESLint?` (你要使用 ESLint 嗎？)

- ➡️ **Yes**

- > (推薦，這是檢查程式碼品質的好工具)

- `Would you like to use React Compiler?` (你要使用 React Compiler 嗎？)

- ➡️ **Yes**

- `Would you like to use Tailwind CSS?` (你要使用 Tailwind CSS 嗎？)

- ➡️ **Yes**

- > (推薦，這能讓我們稍後快速美化頁面)

- `Would you like to use 'src/' directory?` (你要使用 `src` 資料夾嗎？)

- ➡️ **Yes**

- > (推薦，這是良好的專案結構，將所有程式碼放在 `src` 資料夾中)

- `Would you like to use App Router? (recommended)` (你要使用 App Router 嗎？)

- ➡️ **Yes**

- > (推薦，這是 Next.js 13+ 的新標準架構)

- `Would you like to use Turbopack? (recommended)` (你要使用 Turbopack 嗎？)

- ➡️ **Yes**

- `Would you like to customize the default import alias...?` (自訂 @/ 符號？)

- ➡️ **No**

- > (保持預設即可，它會自動幫我們設定好 `@/*`)
## 4. 啟動專案並進行清理

> 專案建立完成後，我們要啟動它，並移除 Next.js 預設的歡迎頁面，換上我們自己的內容。

### 進入專案資料夾並啟動

在同一個 VS Code 終端機中，執行以下指令：

# 1. 進入你剛剛建立的專案資料夾
cd todo-list-app

# 2. 啟動開發伺服器
npm run dev

終端機會顯示伺服器正在運作，通常會是：

- ready started server on 0.0.0.0:3000, url: http://localhost:3000

---

### 開啟瀏覽器

打開你的瀏覽器 (例如 Chrome)，前往 `http://localhost:3000`。
你會看到 Next.js 的預設歡迎頁面（一個深色的頁面，中間有 Next.js 的標誌）。

---

### 清理預設頁面 (src/app/page.js)

我們要將預設的首頁內容清空。

1. 在 VS Code 左側的檔案總管中，展開 `src` 資料夾，然後展開 `app` 資料夾。
2. 找到並打開 `page.js` 檔案。 (路徑: `src/app/page.js`)
3. **將檔案中的所有程式碼刪除**。
4. 貼上以下最基本的程式碼：

// src/app/page.js

export default function Home() {
  return (
    <main>
      <h1>我的 To-Do List</h1>
    </main>
  );
}

---

### (可選) 清理全域 CSS (src/app/globals.css)

Next.js 預設的全域 CSS 會影響我們的外觀，我們也把它清理掉。

1. 在 VS Code 左側的檔案總管中，找到並打開 `globals.css` 檔案。 (路徑: `src/app/globals.css`)
2. 將檔案中的**所有內容刪除**。
3. **只**貼上以下程式碼 (這是 Tailwind CSS 運作所必需的)：

/* src/app/globals.css */

@import "tailwindcss";

---

### 確認結果

儲存 `page.js` 和 `globals.css` 兩個檔案。

回到你的瀏覽器 (`http://localhost:3000`)。由於 Next.js 支援「熱更新」(Hot Reload)，頁面應該會自動重新整理。

你現在看到的頁面應該是：

- **白色背景** (因為 `globals.css` 已經清空)
- 左上角顯示 **「我的 To-Do List」** (來自 `page.js`)

---

**\[下一步\]**： 頁面清理完畢，接下來我們將透過 **Vibe Coding** 開始撰寫 **To-Do List** 核心邏輯，因此我們需要註冊 **GitHub** 帳號，這樣才可以使用 vscode 內建的 Copilot。

## 5. 建立專案架構

我們將 Next.js 專案不必要的東西清除之後，接下來要做一個適合To-Do List 專案架構。

我們需要創建這些東西：`/component`, `TodoInput.js`, `TodoItem.js`, `TodoList.js`。讓專案變成以下的結構

src
├─ app
│ ├─ favicon.ico
│ ├─ globals.css
│ ├─ layout.js
│ └─ page.js
└─ components
├─ TodoInput.js
├─ TodoItem.js
└─ TodoList.js

* `/components`：存放 To-Do List 所需組件的資料夾
* `TodoInput.js`：輸入任務的組件
* `TodoItem.js`：任務組件
* `TodoList.js`：存放任務組件的清單

## 6. 使用 Vibe Coding 實現核心邏輯

點擊 vscode 的上方的紅色框部分，點選開啟聊天。

並且在聊天框中將模式設定為 agent。

---

### 階段一：建立核心邏輯 (在 `page.js` 中)

首先，我們要讓頂層組件動起來。

**➡️ 提示詞 1：建立 State 和 "新增" 功能**

我正在 /page.js 檔案中。這將是我的 Todo List 應用程式的頂層組件。請幫我完成以下任務：

1.  在檔案頂部加上 "use client"，因為我們需要使用 React Hooks。
2.  Import 'useState'。
3.  建立一個名為 'todos' 的 state，其初始值為一個空陣列 []。
4.  建立一個名為 'addTodo' 的函式。這個函式接受一個 'text' 參數，並將一個新的 todo 物件（格式為 { id: Date.now(), text: text, completed: false }）添加到 'todos' 陣列中。

_(AI 會產生 `page.js` 的基本架構。)_

### 階段二：建立輸入組件 (在 `components/TodoInput.js` 中)

接著，我們需要一個地方來輸入新的 todo。

**➡️ 提示詞 2：建立 Input 組件**

我現在切換到 /components/TodoInput.js 檔案。請幫我建立一個組件，它完成以下任務：

1.  它也需要 "use client" 和 'useState'。
2.  它接受一個名為 'addTodo' 的 prop（這將是來自 page.js 的函式）。
3.  它需要自己的 state，名為 'inputText'，用來管理 input 欄位中的文字。
4.  它包含一個 <input> 欄位和一個 '新增' 按鈕。
5.  當 input 欄位變更時，更新 'inputText' state。
6.  當點擊 '新增' 按鈕時：
    a. 檢查 'inputText' 是否為空，如果不為空才執行下一步。
    b. 調用從 props 傳入的 'addTodo(inputText)'。
    c. 清空 'inputText' state。

---

### 階段三：建立顯示組件 (在 `components/TodoItem.js` 和 `components/TodoList.js` 中)

現在我們需要顯示 todo 項目。我們先做最小的單元 `TodoItem`。

**➡️ 提示詞 3：建立單一項目組件 (`TodoItem.js`)**

我現在切換到 /components/TodoItem.js 檔案。

1.  這是一個客戶端組件 ("use client")。
2.  它接受一個名為 'todo' 的 prop（這是一個 todo 物件，例如 { id: 1, text: '...', completed: false }）。
3.  它只需要在一個 <li> 標籤中顯示 'todo.text'。

**➡️ 提示詞 4：建立列表組件 (`TodoList.js`)**

我現在切換到 /components/TodoList.js 檔案。

1.  這是一個客戶端組件 ("use client")。
2.  Import 'TodoItem' 組件。
3.  它接受一個名為 'todos' 的 prop（這是來自 page.js 的 todo 陣列）。
4.  它應該使用 .map() 遍歷 'todos' 陣列。
5.  對於陣列中的每一個 'todo'，渲染一個 <TodoItem> 組件，並將 'todo' 物件作為 prop 傳遞下去。記得加上 'key={todo.id}'。
6.  用一個 <ul> 標籤把所有的 <li> (來自 TodoItem) 包起來。

---

### 階段四：組合所有組件 (回到 `page.js`)

所有零件都做好了，我們把它們組裝起來。

**➡️ 提示詞 5：整合組件**

我現在回到 /page.js。我已經有了 'todos' state 和 'addTodo' 函式。請幫我完成整合：

1.  Import 'TodoInput' 組件（從 /components/TodoInput）。
2.  Import 'TodoList' 組件（從 /components/TodoList）。
3.  在 JSX 中，首先渲染 <TodoInput>，並將 'addTodo' 函式作為 prop 傳遞給它（<TodoInput addTodo={addTodo} />）。
4.  在 <TodoInput> 下方，渲染 <TodoList>，並將 'todos' state 作為 prop 傳遞給它（<TodoList todos={todos} />）。
5.  幫我加上一些基本的 h1 標題，例如 "我的 Todo List"。

---

### 階段五：迭代與新增功能 (Vibe Coding 的核心)

當基本功能完成後，你可以開始添加新功能，例如「刪除」或「標記完成」。

**➡️ 提示詞 6：新增 "刪除" 功能**

我想新增「刪除 todo」的功能。請指導我一步一步完成：

1.  首先，在 /page.js 中，建立一個 'deleteTodo' 函式，它接受一個 'id' 參數，並使用 .filter() 從 'todos' state 中移除該 id 的項目。
2.  接著，將 'deleteTodo' 函式作為 prop 傳遞給 <TodoList>。
3.  然後，修改 /components/TodoList.js，讓它接收 'deleteTodo' prop，並將其傳遞給每一個 <TodoItem>。
4.  最後，修改 /components/TodoItem.js，讓它接收 'deleteTodo' prop，並在 'todo.text' 旁邊

---

### 階段六：依照個人偏好去進行美化

To-Do List 基本已經完成，現在可以依照個人的偏好，風格跟 AI 說，讓它使用 Tailwind CSS 去幫你美化。

**➡️ 提示詞 7：美化 To-Do List**

我想要使用 Tailwind CSS 去將我的 To-Do List 有高度互動感的樣子。