學習與開發 Next.js

2025-12-152025-12-15

hello world 的執行畫面

學習 Next.js 其實就像蓋房子一樣，要從地基開始打起。你需要先有一些 React 的基礎知識，因為 Next.js 是建立在 React 之上的框架。

第一步：打好基礎

如果你還不熟悉 React，建議你先去學一下 React 的核心觀念，像是元件 (Components)、Props、State、Hooks 等等。這是開發 Next.js 網站的必備知識。

第二步：掌握 Next.js 的核心概念

接著就可以開始學習 Next.js 了。Next.js 最重要的幾個特色，你要花時間弄懂：

路由系統 (Routing)：Next.js 是怎麼處理不同頁面之間的跳轉和導航。特別是 App Router (應用程式路由器) 的概念，這是目前最新的做法。
資料獲取 (Data Fetching)：這部分是 Next.js 的精華。你要知道什麼是 Server-Side Rendering (SSR)、Static Site Generation (SSG) 和 Client-Side Rendering (CSR)，以及什麼時候該用哪一種方式來取得資料。
API 路由 (API Routes)：如果你需要網站後端的功能，Next.js 讓你可以在同一個專案中建立 API 接口。

第三步：動手實作專案

學習最好的方法就是動手做。你可以從官方的 Next.js 教程 開始，跟著步驟建立一個簡單的網站。

等你熟悉基礎後，可以試著自己建立一些小專案：

一個簡單的部落格：練習 SSG 和動態路由。
一個待辦事項 (To-Do List) 應用：練習狀態管理和資料更新。
一個簡單的電商網站：練習複雜的路由和資料獲取策略。

第四步：實際開發的建議

在實際開發專案時，還有一些建議可以讓你的學習更順利：

使用 TypeScript：雖然不是強制，但使用 TypeScript 可以讓你的程式碼更穩固，減少錯誤。
部署 (Deployment)：學會怎麼把你的網站發佈到網路上，像是使用 Vercel (Next.js 的開發公司) 或是其他雲端平台，這樣才能算是完整的開發流程。
關注效能：Next.js 的優勢就在於效能。你要學習如何優化圖片、減小程式碼大小，讓你的網站載入更快。

製作 Next.js 的 Hello World 網頁

製作 Next.js 的 “Hello World” 網頁其實很簡單，主要是三個步驟：建立專案、建立頁面、執行專案。

第一步：建立 Next.js 專案

首先，你需要打開你的終端機 (Terminal) 或是命令提示字元 (Command Prompt)，然後執行這個指令來建立一個新的 Next.js 專案。

npx create-next-app@latest nextjs-hello-world

執行這個指令後，程式會問你一些問題來設定專案：

專案名稱 (Project name)：我們已經設定了 nextjs-hello-world。
是否使用 TypeScript (Would you like to use TypeScript?)：選 No (否)，讓專案保持最簡單。
是否使用 ESLint (Would you like to use ESLint?)：選 No (否)。
是否使用 Tailwind CSS (Would you like to use Tailwind CSS?)：選 No (否)。
是否使用 src/ 目錄 (Would you like to use src/ directory?)：選 No (否)。
是否使用 App Router (Would you like to use App Router?)：這是 Next.js 推薦的新方式，選 Yes (是)。
是否使用預設的導入別名 (Would you like to customize the default import alias?)：選 No (否)。

這樣，一個名為 nextjs-hello-world 的資料夾就會被建立起來，裡面有 Next.js 專案需要的全部檔案。

第二步：建立 Hello World 頁面

我們現在要修改或建立一個檔案，讓它顯示 “Hello World”。

進入專案資料夾：
cd nextjs-hello-world
找到並編輯主要頁面檔案：使用 App Router 時，根目錄頁面的檔案是 app/page.js。你用程式碼編輯器 (例如 VS Code) 打開這個檔案。
修改檔案內容：把 app/page.js 裡面的所有內容都刪掉，然後貼上以下最簡單的 React 元件程式碼：

export default function Home() {
  return (
    <div>
      <h1>Hello World! 這是我的第一個 Next.js 網頁。</h1>
      <p>我很期待開始學習 Next.js！</p>
    </div>
  );
}

第三步：執行專案並查看結果

最後一步就是把你的網站跑起來：

執行開發伺服器：在專案資料夾裡執行這個指令。
npm run dev
打開瀏覽器：當你看到終端機顯示伺服器已經啟動後，打開你的網頁瀏覽器。
輸入網址：在網址列輸入
http://localhost:3000
(通常預設是這個位置)。

你應該就會看到一個網頁，上面顯示著你寫好的 “Hello World! 這是我的第一個 Next.js 網頁。” 訊息了。

要結束運行，回到終端機按下 Ctrl + C 即可。

什麼是 Tailwind CSS

Tailwind CSS 是一個 CSS 框架，不過它的工作方式跟我們常聽到的 Bootstrap 或 Foundation 很不一樣。它被稱為一個 工具類別優先 (Utility-First) 的 CSS 框架。

它的工作方式

一般的 CSS 寫法是先定義好一個像 style.css 的檔案，然後在裡面寫一堆規則，像是：

CSS

.card {
  background-color: white;
  padding: 1rem;
  border-radius: 0.5rem;
}

然後你在 HTML 裡面使用 <div class="card">。

但是 Tailwind CSS 卻不是這樣。它已經幫你準備好成千上萬個最小單位的工具類別 (Utility Classes)。每個類別都只做一件事情。

例如，如果你想要一個白色的背景、邊緣是圓角的區塊，你在 HTML/JSX 裡面會這樣寫：

HTML

<div class="bg-white p-4 rounded-lg shadow-md">
  </div>

這裡面每一個獨立的詞都是一個 Tailwind 的類別：

bg-white：設定背景顏色為白色。
p-4：設定四邊的內邊距 (Padding) 是 1rem (通常 4 代表這個數值)。
rounded-lg：設定邊角是大的圓角。
shadow-md：設定中等大小的陰影。

你不需要自己寫 CSS 規則，直接把這些「工具」拼湊起來，就能做出你想要的樣式。

為什麼大家喜歡用它

開發速度快：你不用在 HTML 和 CSS 檔案之間一直切換。大部分的樣式都直接在 HTML 裡面完成了。
設計彈性高：你不是被框架限制住，必須使用它預設的按鈕或卡片樣式。你可以自由組合這些工具類別，做出完全符合你設計的 UI 介面。
程式碼更小：Tailwind CSS 在部署時，會自動移除你沒有用到的 CSS 類別，讓最後的 CSS 檔案變得非常小，可以加快網站的載入速度。

簡單來說，Tailwind CSS 就像是把蓋房子的所有小積木都準備好了，讓你直接在圖紙上 (HTML) 拼裝出一個完整的建築物，而不用先去旁邊的工廠 (CSS 檔案) 製作這些零件。

關於選擇不使用 Tailwind CSS 的原因

你在問，為什麼前面我示範建立 Next.js 專案的時候，會建議你在設定步驟中選擇不使用 Tailwind CSS。

主要的原因是為了讓 “Hello World” 這個入門專案保持在最簡單的狀態。

讓入門更容易

專注於 Next.js 核心：我們現在的首要目標是理解 Next.js 怎麼運行、路由 (Routing) 怎麼工作，以及如何建立一個最基礎的 React 元件頁面。如果一開始就加入 Tailwind CSS，你就必須同時處理兩個東西的學習曲線：Next.js 和 Tailwind CSS 的類別名稱。
減少檔案複雜度：雖然 Tailwind CSS 非常好用，但它需要一些設定檔案 (例如 tailwind.config.js、postcss.config.js 等)。對於剛開始接觸的新手來說，這些額外的檔案可能會讓專案看起來更複雜、更難理解。
避免樣式干擾：create-next-app 建立的專案，即使沒有選 Tailwind CSS，也會有一些預設的 CSS 樣式。如果加入了 Tailwind CSS，它會覆蓋或改變這些預設樣式，反而會讓你在修改程式碼時，不確定是哪一個樣式在影響畫面的呈現。

簡單來說，在學習新東西的第一步，我們通常會盡量排除所有非必要的額外技術，讓學習焦點只集中在 Next.js 本身。等你對 Next.js 的運作模式熟悉了之後，隨時都可以很容易地把 Tailwind CSS 加進來使用。

建立 Next.js 專案設定差異

你觀察得很仔細。指令 npx create-next-app@latest nextjs-hello-world 執行後，實際問的問題確實會因為 Next.js 版本的更新 而有所不同。

你的畫面與我描述的差異

我之前給你的回答是基於一個 較常見或稍早的穩定版本 的預設提問流程。而你實際操作時遇到的提問，很可能是因為你使用了 最新版 (可能是 Next.js 15 或更高版本) 的 create-next-app。

你遇到的提問流程如下：

Would you like to use the recommended Next.js defaults?
- 你選擇了 No, customize settings (否，自訂設定)。這個選擇會開啟接下來一系列詳細的提問，讓你手動設定每一個選項。
Would you like to use TypeScript?
- (對應)：這與我之前提到的「是否使用 TypeScript」是相同的。
Which linter would you like to use?
- (差異)：這個問題取代了舊版中的「是否使用 ESLint」。linter 就是程式碼風格檢查工具。你選擇了 None (無)，表示不使用檢查工具。
Would you like to use React Compiler?
- ** (新出現)**：這是 Next.js 新版本中出現 的一個重要選項，可能在你之前使用的版本中沒有。

關於新選項 React Compiler

React Compiler 是一個由 Meta (Facebook) 開發的工具。它的主要目的是讓 React 應用程式的 效能更好。

簡單來說：

原理：它會自動分析你的 React 元件程式碼。當元件的狀態或 Props 發生變化時，Compiler 會聰明地判斷哪些部分不需要重新渲染，並自動跳過這些不必要的更新。
優勢：以前，開發者需要手動使用 useMemo 或 useCallback 這類 Hooks 來進行效能優化。有了 React Compiler，它會自動完成這件事，讓你的程式碼更簡潔，但效能更好。
建議：對於新手來說，為了保持簡單，你可以選擇 No。但如果你的專案目標是追求最佳效能，使用這個新功能會是未來的主流趨勢。

結論

由於 Next.js 更新非常快，create-next-app 的初始化流程常常會改變。你的選擇完全合理：

選擇 No, customize settings 是對的，這樣你才能手動設定。
對於入門專案，No (不使用 TypeScript, 不使用 Linter, 不使用 React Compiler) 是最簡單的組合。

如果你已經有一個架設了 Apache Web Server 的 VPS，可以在上面運行 Next.js 網站，但不能只執行 npm run dev 來當作正式環境使用。

為什麼不能只用 `npm run dev`

npm run dev 執行的是 Next.js 的 開發模式 (Development Mode)。

功能：它有熱重載 (Hot Reloading) 等功能，讓你隨時看到程式碼修改的效果。
問題：它的效能很低、記憶體佔用高，而且沒有經過優化。它不是設計來應付大量用戶同時訪問的正式環境。如果拿來當作伺服器，很快就會因為負載過高而出錯。

正確的部署方式：建構 (Build) 與啟動 (Start)

要在正式環境中運行 Next.js 網站，你需要經過以下兩個關鍵步驟：

建構 (Build)：
- 指令：執行
  npm run build
- 作用：這個指令會將你的 Next.js 程式碼編譯、優化、壓縮，變成一堆靜態檔案和優化過的 JavaScript 程式碼。這些檔案會被放在專案根目錄下的 .next 資料夾中。這個步驟是為了讓網站達到最佳效能。
啟動 (Start)：
- 指令：執行
  npm run start
- 作用：這個指令會啟動一個 Next.js 專用的 Node.js 伺服器。這個伺服器會讀取 .next 資料夾中的優化檔案，提供經過 SSR/SSG 處理後的網頁內容給使用者。

如何整合 Apache Web Server

你可以把 Apache 當作 反向代理伺服器 (Reverse Proxy) 。

Next.js 伺服器：你讓 Next.js 專用的 Node.js 伺服器運行在 VPS 上的某個內部 Port (例如 http://localhost:3000)。
Apache 伺服器：它仍然運行在標準的 Port 80/443 上。
代理設定：你設定 Apache，讓所有對外公開的網址請求，都轉發給運行在內部 Port 的 Next.js 伺服器。

流程是這樣：

使用者訪問 你的網址:80 (由 Apache 接收)。
Apache 看到這個請求，根據你的設定，把它轉發給 localhost:3000 (Next.js 伺服器)。
Next.js 伺服器處理請求，生成網頁內容。
網頁內容回傳給 Apache。
Apache 再回傳給使用者的瀏覽器。

這樣做的好處是，你可以繼續使用 Apache 的 SSL 加密、負載平衡等成熟功能，同時讓 Next.js 專注於高效地提供網頁內容。

總結

總之，在你的 VPS 上：

進入專案目錄，執行 npm run build。
執行 npm run start 啟動 Next.js 伺服器。
設定 Apache 作為反向代理，將 Port 80/443 的流量導向 Next.js 伺服器運行的 Port。

Max的程式語言筆記