Next.js 入門：建立開發環境

Next.js 是一個基於 React 的強大框架，由 Vercel 開發並維護。它不僅提供了一套完整的開發工具，更解決了傳統 React 應用在 SEO（搜尋引擎最佳化）和效能上的痛點。

在現代網頁開發中，Next.js 已經成為事實上的標準，特別是自從 App Router 推出後，它將 React Server Components (RSC) 的威力完全釋放。

為什麼選擇 Next.js？

傳統的 React 應用（如 Create React App）通常是客戶端渲染 (CSR)，這意味著瀏覽器需要下載大量的 JavaScript 檔案才能顯示畫面，這對 SEO 較不友善且首屏載入較慢。

Next.js 提供了以下核心優勢：

• 伺服器端渲染 (SSR)：在伺服器端生成 HTML，讓使用者能更快看到畫面，且 SEO 效果絕佳。
• 靜態網站生成 (SSG)：在編譯時就生成好 HTML 檔案，速度飛快。
• App Router：更直觀的路由系統，支援巢狀佈局 (Nested Layouts) 與更細緻的快取管理。
• 自動最佳化：內建圖片、字體、腳本的自動最佳化功能。
• 零設定：自動處理程式碼拆分 (Code Splitting)、編譯與熱更新。

環境準備

在開始之前，請確保你的電腦已經安裝了以下工具：

1. Node.js：建議安裝 v18.17 或更高版本。
2. 終端機 (Terminal)：如 macOS 的 Terminal、Windows 的 PowerShell 或 VS Code 內建的終端機。
3. 套件管理工具：你可以選擇使用 npm、yarn 或目前最推薦、速度最快的 bun 或 pnpm。

建立第一個專案

我們使用官方推薦的 create-next-app 工具來快速建立專案。

打開你的終端機，執行以下指令：

# 使用 npx (npm 內建工具)
npx create-next-app@latest my-next-app

# 或者如果你使用 bun
bun create next-app my-next-app

在安裝過程中，系統會向你確認以下設定，我們建議依照預設選擇（按下 Enter）：

✔ 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 `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

設定重點說明

• TypeScript：現在開發 React/Next.js 的標準選擇，提供強型別檢查。
• Tailwind CSS：Next.js 官方首選的 CSS 框架，能快速構建漂亮介面。
• App Router：這非常重要，請務必選擇 Yes。這是 Next.js 目前的主流架構。

啟動開發伺服器

完成安裝後，進入專案目錄並啟動開發伺服器：

cd my-next-app

# 使用 npm
npm run dev

# 或者使用 bun
bun dev

啟動後，瀏覽器打開 http://localhost:3000，你應該就能看到 Next.js 的預設歡迎頁面了。

專案資料夾概覽

建立好的專案結構大致如下：

my-next-app/
├── app/               # App Router 的核心目錄（放置路由與佈局）
│   ├── layout.tsx     # 全站共用的根佈局
│   ├── page.tsx       # 首頁檔案
│   └── globals.css    # 全域樣式檔案
├── public/            # 放置圖片、字體等靜態資源
├── next.config.mjs    # Next.js 設定檔
├── package.json       # 專案套件資訊
└── tailwind.config.ts # Tailwind CSS 設定檔