個人網頁開發
EP.02

開發環境建置
從零到跑起第一個畫面

安裝 Node.js、設定 VS Code、建立 Next.js 專案，
讓你的電腦能跑和我的個人網頁一樣的技術棧

Joseph Chen

2024
5 min read
1.2k views

開始之前

這篇假設你有一台電腦（Mac 或 Windows 都可以），沒有任何開發環境。完成這篇之後，你會擁有：

📦

Node.js

執行 JavaScript 的環境，Next.js 需要它

🖊️

VS Code

最流行的程式碼編輯器，功能強大且免費

🚀

Next.js 專案

一個可以在本機跑的個人網頁骨架

一步一步安裝

1

安裝 Node.js

Node.js 讓你的電腦可以在「瀏覽器之外」執行 JavaScript。Next.js 的開發伺服器和打包工具都需要它。

💡
要裝哪個版本？ 建議安裝 LTS（Long-Term Support）版本，目前是 Node.js 22.x。LTS 版本最穩定，不用追最新。

下載方式：

Mac：前往 nodejs.org，點「LTS」版本下載 .pkg 安裝檔，雙擊安裝即可。
Windows：同樣前往 nodejs.org，下載 .msi 安裝檔，一路「下一步」。

安裝完成後，打開終端機（Mac 的 Terminal 或 Windows 的 PowerShell），輸入以下指令確認安裝成功：

terminal
node --version
# 應該輸出類似 v22.0.0

npm --version
# 應該輸出類似 10.x.x
✅
Node.js 安裝完會自動附帶 npm（Node Package Manager），也就是 JavaScript 的套件管理工具。以後安裝 React、HeroUI 等套件都靠它。
2

安裝 VS Code + 推薦擴充套件

VS Code 是目前最主流的程式碼編輯器，免費、跨平台、有幾千個擴充套件。 前往 code.visualstudio.com 下載安裝即可。

安裝後，搜尋並安裝這幾個擴充套件（在左側 Extensions 面板搜尋）：

ES7+ React/Redux/React-Native snippets 推薦必裝

輸入 rafce 自動展開成 React 元件骨架，省去重複打字

Tailwind CSS IntelliSense 推薦必裝

寫 Tailwind class 時自動補全，顯示對應的 CSS 值

Prettier - Code formatter 推薦必裝

自動排版程式碼，讓每個人的程式碼格式一致

GitLens

讓 Git 的功能直接顯示在程式碼旁邊，看誰寫了哪行

3

建立 Next.js 專案

打開終端機，切換到你想放專案的資料夾（例如桌面），執行以下指令：

terminal — 建立新專案
# 切換到桌面（Mac）
cd ~/Desktop

# 建立 Next.js 專案，把 my-portfolio 換成你想要的專案名稱
npx create-next-app@latest my-portfolio

執行後會問你幾個設定選項，照以下方式選：

互動設定選項
Would you like to use TypeScript? › Yes      # 強烈建議
Would you like to use ESLint? › Yes           # 程式碼品質檢查
Would you like to use Tailwind CSS? › Yes     # 我們要用
Would you like to use the src/ directory? › No # 不需要
Would you like to use App Router? › Yes       # 現代路由系統，選是
Would you like to customize the import alias? › No
💡
npx 是什麼？ npx 是 npm 內建的執行工具，npx create-next-app 意思是「下載並執行 create-next-app 這個建立專案的工具」。你不需要先安裝它，npx 會自動處理。
4

啟動開發伺服器，看到第一個畫面

專案建立好之後，進入資料夾並啟動開發伺服器：

terminal
# 進入剛建立的專案資料夾
cd my-portfolio

# 安裝依賴套件（第一次必做，之後不需要）
npm install

# 啟動開發伺服器
npm run dev

你應該會看到：

terminal 輸出
▲ Next.js 16.x.x
- Local:        http://localhost:3000
- Network:      http://192.168.x.x:3000

✓ Starting...
✓ Ready in 1234ms

打開瀏覽器，前往 http://localhost:3000，你會看到 Next.js 的預設歡迎頁面。這代表一切正常運作了！

✅
開發伺服器是「Hot Reload」的：你修改程式碼存檔後，瀏覽器會自動更新，不需要手動重整。這讓開發效率大幅提升。
5

用 VS Code 打開專案

在終端機中，執行：

terminal
# 在 VS Code 中打開當前資料夾
code .

VS Code 會開啟，左側可以看到整個專案的資料夾結構。下一篇我們會詳細說明每個資料夾和檔案的功能。

⚠️
Mac 用戶注意：如果 code . 指令找不到，需要在 VS Code 中按 Cmd+Shift+P，搜尋「Shell Command: Install 'code' command in PATH」並執行一次。

安裝我個人網頁用到的套件

Create Next App 只給你最基本的 Next.js + Tailwind。要達到和我的網頁一樣的效果，還需要安裝 HeroUI 和 Framer Motion：

terminal — 安裝額外套件
# HeroUI 元件庫（Card、Button、Chip 等 UI 元件）
npm install @heroui/react framer-motion

# Lucide React（icon 圖示庫）
npm install lucide-react

安裝完後，還需要在 tailwind.config.ts 加入 HeroUI 的設定。這部分我們在 EP.06 講 HeroUI 時會詳細說明。

💡
npm install 在做什麼？ 它會把套件下載到 node_modules/ 資料夾，並在 package.json 記錄這個依賴。其他人拿到你的專案後，執行 npm install 就能還原一樣的環境。

常見問題

終端機在哪裡？

Mac：Spotlight 搜尋「Terminal」或「iTerm」。Windows：搜尋「PowerShell」或「Windows Terminal」。VS Code 也有內建終端機（Ctrl+` 打開）。

npx create-next-app 很慢，一直在下載？

正常的，第一次會下載幾十 MB 的套件。有時候國內連 npm 較慢，可以嘗試換到較好的網路環境，或稍等幾分鐘。

npm run dev 啟動後，改了程式碼但畫面沒更新？

確認存檔了（Ctrl+S / Cmd+S）。如果還是沒更新，試試手動刷新瀏覽器（F5 / Cmd+R），或重新啟動 dev server。

port 3000 already in use？

代表 port 3000 被其他程式佔用。Next.js 會自動換到 3001，或你可以用 npm run dev -- -p 4000 指定其他 port。

這篇學到什麼

📦Node.js 是跑 Next.js 的底層環境，npm 是它附帶的套件管理工具
🖊️VS Code + 4 個擴充套件（snippets、Tailwind IntelliSense、Prettier、GitLens）是標準配備
🏗️npx create-next-app 建立專案，npm run dev 啟動開發伺服器，localhost:3000 預覽
🔄Hot Reload 讓你存檔就能立即看到變化，開發效率的關鍵
📦npm install <package-name> 安裝套件，node_modules 存放下載的依賴

上一篇

EP.01 — 認識現代網頁開發

HTML、CSS、JS 到 React 的演進

下一篇

EP.03 — 認識專案結構

每個資料夾和檔案在做什麼

Web Dev
Node.js
VS Code
Next.js
環境建置
EP.02