陳憲億 Joseph Chen | Software Engineer & AI Developer

每個工程師都應該有一個自己的作品集網站。不只是展示作品，更是一個讓自己練手新技術、留下學習軌跡的地方。這篇文章分享我打造 ReactChullin 的過程，包含技術選型、遇到的坑，以及部署到正式環境的細節。

技術選型

選擇技術棧的原則很簡單：使用我最想深入學習的工具，而不是選最熟悉的。這個專案的主要技術：

Next.js 14React 18TypeScriptTailwind CSSHeroUIFramer MotionVercel

Next.js 的 App Router 是這次的重點學習目標。相比 Pages Router，App Router 支援 Server Components，讓頁面結構更清晰，也更容易做 SEO 優化。

專案架構

App Router 的資料夾即路由的概念非常直覺，整個專案的結構如下：

text

ReactChullin/
├── app/
│   ├── layout.tsx          # 全域 Layout（Navbar、Footer）
│   ├── page.tsx            # 首頁
│   ├── blog/
│   │   ├── page.tsx        # 部落格列表
│   │   └── [slug]/         # 個別文章
│   ├── seg/                # 其他頁面段落
│   └── globals.css
├── components/
│   ├── Navbar.tsx
│   ├── Footer.tsx
│   └── ...
├── utils/                  # 工具函式
└── public/                 # 靜態資源

最麻煩的一關：Git 分支衝突

部署到 Vercel 之前，遇到了一個讓我頭痛的問題：本地 master 分支和遠端 main 分支的歷史完全不同。這種情況叫做「diverged branches」，直接 merge 會有衝突。

bash

# 問題：兩個分支沒有共同的 base commit
git log --oneline --graph --all
# * a1b2c3d (origin/main) Initial commit from Vercel
# * d4e5f6a (master) my local commits...

# 解法：用 --allow-unrelated-histories 強制合併
git checkout main
git merge master --allow-unrelated-histories

# 解決衝突後
git add .
git commit -m "Merge master into main"
git push origin main

教訓：從一開始就在 main 分支工作，不要讓兩邊歷史分叉。如果已經分叉了，越早解決越簡單。

Vercel 部署設定

Vercel 和 Next.js 的整合幾乎是零設定，但有幾個細節值得注意：

Production Branch

Vercel 預設追蹤 main 分支。每次推送到 main 就會觸發自動部署。其他分支的推送會建立 Preview Deployment，可以在正式上線前預覽效果。

next.config.js 設定

因為也部署在 GitHub Pages（chullin.github.io/ReactChullin/），需要設定 basePath。但 Vercel 不需要這個設定，所以要根據環境動態切換。

javascript

// next.config.js
const isProd = process.env.NODE_ENV === 'production'
  && process.env.VERCEL !== '1';

module.exports = {
  basePath: isProd ? '/ReactChullin' : '',
  output: 'export',  // GitHub Pages 需要靜態輸出
}

"建立個人網站最大的價值，不是給別人看，而是給未來的自己留一面鏡子。"

這個專案學到什麼

App Router vs Pages Router

Server Components 的概念需要時間轉換思維，但習慣後邏輯更清晰。

Tailwind CSS 的設計系統

從 utility-first 到建立自己的設計規範，spacing 和 color scale 的一致性非常重要。

Framer Motion 動畫

`whileInView` + `viewport={{ once: true }}` 是讓頁面滾動動畫不重複觸發的關鍵。

Git 分支管理

永遠在一個 branch 上工作，不要讓 master 和 main 同時存在。

用 React + Next.js 打造個人作品集