在 ServBay 中建立並運行 Next.js 專案

概述

Next.js 是一套強大的 React 框架，由 Vercel 開發與維護，廣泛運用於打造現代化、高效能的 Web 應用程式。它在 React 基礎上提供了多種現成功能，大幅簡化開發者構建複雜應用的流程。

什麼是 Next.js？

Next.js 是熱門的開源 React 框架，支援伺服器端渲染 (SSR) 與靜態網站產生 (SSG) 等多種渲染模式，有助於提升應用效能、改善用戶體驗並加強搜尋引擎曝光度。Next.js 內建檔案系統路由、API 路由、代碼分割、CSS Modules 支援等功能，為開發者提供一站式解決方案。

Next.js 的主要特色與優勢

多元渲染策略支援： 支援伺服器端渲染 (SSR)、靜態網站產生 (SSG)、客戶端渲染 (CSR) 及混合渲染，開發者可依需求選擇最合適的模式。
檔案系統路由： 依據 pages 或 app 目錄結構自動產生路由，設定直覺簡單。
API 路由： 讓你能在 Next.js 專案中輕鬆建立自己的 API 端點，輔助前後端整合開發。
自動代碼分割： 頁面級別的分割，僅加載所需 JavaScript，最佳化讀取速度。
優化圖像元件 (next/image)： 自動調整圖片尺寸、格式及加載策略，加強效能表現。
內建 CSS 與 Sass 支援： 容易管理並編寫樣式。
快速熱更新 (Fast Refresh)： 開發過程中提供即時代碼更新回饋。

善用 Next.js，開發者能更高效地打造高效能、可擴展且易於維護的現代化 Web 應用。

在 ServBay 運行 Next.js 專案

ServBay 提供整合式本地 Web 開發環境，內建 Node.js 等多種語言及工具。憑藉 ServBay 的 Node.js 環境和網站管理功能（包括反向代理與靜態檔案服務），我們能非常便利地建立、開發及部署 Next.js 專案。

本文將引導你如何在 ServBay 環境下完成 Next.js 專案的建立、進入開發模式（透過反向代理）以及生產模式部署（利用靜態檔案服務）。

前置條件

開始之前，請確認你已完成下列準備：

已於 macOS 系統成功安裝 ServBay。
已透過 ServBay 的軟體包管理介面安裝並啟用所需 Node.js 軟體包。若尚未安裝 Node.js，請參閱使用 ServBay 的 Node.js 環境文件。

操作步驟

1. 建立 Next.js 專案

首先，需初始化一個全新的 Next.js 專案。

開啟終端機 並切換到 ServBay 預設網站根目錄：
bash
```
cd /Applications/ServBay/www
```
1
使用 create-next-app 建立專案： 執行下列指令以建立新的 Next.js 專案。建議命名為 servbay-next-app，該資料夾會於 /Applications/ServBay/www 產生。
bash
```
npx create-next-app@latest servbay-next-app
```
1
npx 為 Node.js 套件指令執行工具，create-next-app@latest 會使用最新版 Next.js 初始化工具。根據終端機提示設定專案（如選擇是否使用 TypeScript、ESLint、Tailwind CSS、App Router 等）。
進入專案目錄並安裝依賴：
bash
```
cd servbay-next-app
npm install
```
1
2
npm install 會依 package.json 裡的設定安裝所有必要套件。

2. 修改專案輸出內容（選用）

為驗證專案成功啟動，可簡單修改首頁內容。

開啟 pages/index.js 檔案（若選擇 Pages Router）。若採用 App Router，請修改 app/page.js。本例以 Pages Router 為例：
bash
```
# 使用你熟悉的編輯器開啟檔案，例如 VS Code
code pages/index.js
```
1
2
編輯檔案內容 使網頁顯示 "Hello ServBay!"。將內容更改為如下結構：
javascript
```
// pages/index.js (Pages Router)
export default function Home() {
  return (
    <div>
      <h1>Hello ServBay!</h1>
      <p>This page is running via ServBay.</p>
    </div>
  );
}
```
1
2
3
4
5
6
7
8
9
若是採用 App Router (app/page.js)，內容結構可能略有不同，但更改 <h1> 標籤內容的操作相同。

3. 進入開發模式

開發階段通常以 Next.js 內建伺服器進行，支援熱模組替換（HMR）及快速熱更新，可即時觀察代碼異動成效。ServBay 的反向代理功能正好能將本地開發伺服器對應到外部域名。

啟動 Next.js 開發伺服器： 在專案根目錄 (/Applications/ServBay/www/servbay-next-app) 輸入以下指令：
bash
```
npm run dev -- -p 8585
```
1
此指令會啟動 Next.js 開發伺服器，並以 -- -p 8585 指定監聽本機 8585 埠口。你亦可自訂其他未佔用的埠口。
設定 ServBay 網站（反向代理）： 開啟 ServBay 應用，進入網站管理。點選新增網站，設定如下：
- 名稱 (Name)：My first Next.js dev site（或自行命名）
- 網域 (Domain)：servbay-next-dev.servbay.demo（建議用 .servbay.demo 為本地測試網域）
- 網站類型 (Website Type)：選擇 反向代理 (Reverse Proxy)
- 代理目標 IP (Proxy IP)：127.0.0.1（指向本機回圈位址）
- 代理目標埠口 (Proxy Port)：8585（對應 Next.js 開發伺服器監聽埠）
設定完成後，儲存並套用 ServBay 變更。ServBay 會自動配置 Caddy 或 Nginx（視你的 ServBay 設定）以處理 servbay-next-dev.servbay.demo 的請求，並轉發至 127.0.0.1:8585。
詳細設定方式可參考在 ServBay 中新增 Node.js 開發網站文件。
訪問開發模式網站： 開啟瀏覽器，輸入配置的網域 https://servbay-next-dev.servbay.demo。
由於 ServBay 預設支援並自動為新增本地域名配置 SSL 憑證（透過 ServBay User CA），你可直接安全地以 HTTPS 存取本地開發網站，避免瀏覽器警告。ServBay 支援自訂網域及免費 SSL 憑證，對本地開發極為便利。

4. 建構生產版本並部署靜態網站

當 Next.js 專案開發完成準備上線時，通常會構建優化過的生產版本。對於產生靜態輸出的 Next.js 專案（設定 output: 'export' 或使用 next export 指令），ServBay 的靜態網站服務是理想選擇。

建構 Next.js 生產版本並導出靜態檔案： 在專案目錄 (/Applications/ServBay/www/servbay-next-app) 執行下列指令：
bash
```
npm run build
npm run export
```
1
2
- npm run build 編譯 Next.js 代碼，生成最佳化的生產版本，預設輸出於 .next 目錄下。
- npm run export（需 Next.js 配置支援或早期版本）或設置 output: 'export' 會把已構建好的應用導出為完全靜態的 HTML、CSS 和 JavaScript 檔案，這些檔案將存放於 out 目錄。
設定 ServBay 網站（靜態檔案服務）： 開啟 ServBay 應用，進入網站管理。點選新增網站，設定如下：
- 名稱 (Name)：My first Next.js production site（或自行命名）
- 網域 (Domain)：servbay-next-prod.servbay.demo（建議使用 .servbay.demo 後綴）
- 網站類型 (Website Type)：選擇 靜態 (Static)
- 網站根目錄 (Website Root)：填寫 Next.js 靜態檔案輸出的 out 目錄完整路徑，例 /Applications/ServBay/www/servbay-next-app/out。
設定完成後，儲存並套用 ServBay 變更。ServBay 會設定網頁伺服器直接自 /Applications/ServBay/www/servbay-next-app/out 提供檔案服務。
訪問生產模式網站： 開啟瀏覽器，拜訪設定的網域 https://servbay-next-prod.servbay.demo。你將看到 Next.js 構建並導出的完整靜態網站畫面。
同樣憑藉 ServBay 的自訂網域與自動 SSL 配置，本地生產環境網站亦可透過 HTTPS 提供安全存取。

總結

依循上述步驟，你已成功在 ServBay 本地開發環境中建立 Next.js 專案，並學會如何於開發模式下運用 ServBay 反向代理進行即時預覽，以及在生產建構後透過靜態檔案服務快速部署。ServBay 的整合式環境與便利的網站管理功能，大幅簡化了 Next.js 專案的本地開發與測試流程。

在 ServBay 中建立並運行 Next.js 專案 ​

概述 ​

什麼是 Next.js？ ​

Next.js 的主要特色與優勢 ​

在 ServBay 運行 Next.js 專案 ​

前置條件 ​

操作步驟 ​

1. 建立 Next.js 專案 ​

2. 修改專案輸出內容（選用） ​

3. 進入開發模式 ​

4. 建構生產版本並部署靜態網站 ​

總結 ​