前言

上一篇我們認識了 Next.js 是什麼，了解它是建構在 React 之上的全端框架。這篇文章將帶你實際動手，從零開始建立一個 Next.js 專案，並啟動開發伺服器看到成果。

讀完本篇後，你將能夠：

• 使用 create-next-app 建立新專案
• 理解 Next.js 專案的目錄結構
• 啟動開發伺服器並預覽網站

環境需求

在開始之前，請確認你的電腦已安裝 Node.js。Next.js 需要 Node.js 18.17 或更新版本。

檢查 Node.js 版本：

node -v

如果你看到類似 v18.17.0 或更高的版本號，就可以繼續了。如果尚未安裝，請到 Node.js 官網 下載 LTS 版本。

使用 create-next-app 建立專案

Next.js 提供了官方的專案建立工具 create-next-app，它會自動設定好所有必要的配置。

執行以下指令：

npx create-next-app@latest my-first-app
Code language: CSS (css)

執行後會出現一系列互動式問題：

Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`? No / Yes
Would you like to customize the import alias (@/* by default)? No / Yes
Code language: JavaScript (javascript)

作為初學者，建議的選擇：

• TypeScript: Yes（類型檢查幫助減少錯誤）
• ESLint: Yes（程式碼品質檢查）
• Tailwind CSS: Yes（方便的樣式工具）
• src/ directory: No（保持簡單）
• App Router: Yes（這是 Next.js 目前推薦的路由方式）
• Turbopack: Yes（更快的開發體驗）
• Import alias: No（使用預設即可）

安裝完成後，進入專案目錄：

cd my-first-app

專案目錄結構

建立完成後，你會看到以下目錄結構：

my-first-app/
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── public/
│   ├── next.svg
│   └── vercel.svg
├── .eslintrc.json
├── .gitignore
├── next.config.ts
├── package.json
├── postcss.config.mjs
├── tailwind.config.ts
├── tsconfig.json
└── README.md
Code language: PHP (php)

app/ 目錄

這是 Next.js App Router 的核心目錄，所有的頁面和路由都放在這裡。

• page.tsx：首頁元件，對應網址 /
• layout.tsx：共用的版面配置，包裹所有頁面
• globals.css：全域樣式檔案
• favicon.ico：網站圖示

public/ 目錄

放置靜態資源，如圖片、字型等。這些檔案可以直接透過 URL 存取。

例如 public/next.svg 可以透過 /next.svg 存取。

next.config.ts

Next.js 的配置檔案。初始內容很簡單：

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;
Code language: JavaScript (javascript)

需要自訂設定時（如環境變數、圖片網域等），會在這裡修改。

package.json

記錄專案的依賴套件和指令。重點關注 scripts 區塊：

{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}
Code language: JSON / JSON with Comments (json)

開發指令介紹

Next.js 提供四個主要指令，各有不同用途：

npm run dev

啟動開發伺服器，用於本地開發：

npm run dev

執行後會看到：

  ▲ Next.js 15.x.x (Turbopack)
  - Local:        http://localhost:3000
  - Network:      http://192.168.x.x:3000

 ✓ Starting...
 ✓ Ready in xxxms
Code language: JavaScript (javascript)

這個模式具有 Hot Reload（熱重載）功能，修改程式碼後會自動更新瀏覽器。

npm run build

建置生產版本：

npm run build

這會在 .next/ 目錄產生最佳化後的程式碼，準備部署使用。

npm run start

啟動生產伺服器（需先執行 build）：

npm run start

用於測試生產環境的行為。

npm run lint

執行 ESLint 檢查程式碼品質：

npm run lint

修改首頁並即時預覽

現在來實際修改首頁，體驗開發流程。

首先確保開發伺服器正在運行，然後開啟瀏覽器訪問 http://localhost:3000，你會看到 Next.js 的預設歡迎頁面。

接著打開 app/page.tsx，這是首頁的原始碼。初始內容包含很多範例程式碼，讓我們簡化它：

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold">歡迎來到我的 Next.js 網站</h1>
      <p className="mt-4 text-xl">這是我的第一個 Next.js 專案！</p>
    </main>
  );
}
Code language: JavaScript (javascript)

儲存檔案後，瀏覽器會自動更新，顯示你修改後的內容。這就是 Hot Reload 的威力。

理解這段程式碼

• export default function Home()：定義並匯出一個 React 元件
• return (...)：回傳要渲染的 JSX
• className="..."：使用 Tailwind CSS 的類別來設定樣式
• flex min-h-screen：Flexbox 布局，最小高度為整個螢幕
• items-center justify-center：水平和垂直置中
• text-4xl font-bold：大字體並加粗

小結

這篇文章我們完成了：

1. 環境確認：確保 Node.js 版本符合需求（18.17+）
2. 建立專案：使用 npx create-next-app@latest 建立新專案
3. 認識目錄結構：了解 app/、public/、next.config.ts 的用途
4. 開發指令：學會 dev、build、start、lint 四個指令
5. 即時預覽：修改 page.tsx 並體驗 Hot Reload

下一篇，我們將深入探討 Next.js 的路由系統，學習如何建立多個頁面。

延伸閱讀

• Next.js 官方文件 – Installation
• Next.js 官方文件 – Project Structure