建立並運行 Next.js 專案

什麼是 Next.js？

Next.js 是由 Vercel 開發的一個 React 框架，用於構建靜態與伺服器渲染的 React 應用程式。它提供了許多開箱即用的功能，如伺服器端渲染（SSR）、靜態網站生成（SSG）、API 路由、內建 CSS 和 Sass 支援等，使開發者能更高效地建立現代化的網頁應用。

Next.js 的主要特性和優勢

• 伺服器端渲染（SSR）：提升頁面載入速度和 SEO 效能。
• 靜態網站生成（SSG）：預先渲染靜態頁面，提升性能和用戶體驗。
• 自動代碼分割：只載入當前頁面所需的 JavaScript 代碼，優化性能。
• 內建路由：基於檔案系統的路由，不需要額外配置。
• API 路由：可以在同一專案中建立 API 端點。
• 內建 CSS 和 Sass 支援：方便地管理樣式。

使用 Next.js 可以幫助開發者更高效地建立現代化、反應迅速的網頁應用。

使用 ServBay 建立並運行 Next.js 專案

在這篇文章中，我們將使用 ServBay 提供的 Node.js 環境來建立並運行一個 Next.js 專案。我們將使用 ServBay 的『主機』功能來設置網頁伺服器，並通過反向代理和靜態檔案服務來實現專案的存取。

建立 Next.js 專案

1. 初始化專案

   首先，確保您已經安裝了 ServBay 提供的 Node.js 環境。然後，使用以下命令初始化一個新的 Next.js 專案：

   cd /Applications/ServBay/www
   npx create-next-app@latest servbay-next-app

   按提示輸入專案名稱（建議命名為 servbay-next-app），並根據需求選擇其他選項。

2. 安裝依賴

   進入專案目錄並安裝依賴：

   cd servbay-next-app
   npm install

修改 Next.js 專案輸出內容

1. 修改 pages/index.js 檔案

   打開 pages/index.js 檔案，修改內容使網頁輸出 "Hello ServBay!"：

   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
       </div>
     );
   }

進入開發模式

1. 運行開發伺服器

   啟動開發伺服器並指定端口（例如：8585）：

   npm run dev -- -p 8585

   這將會在本地啓動一個開發伺服器，並暴露端口 8585。

2. 配置 ServBay 主機反向代理

   使用 ServBay 的『主機』功能，通過反向代理來存取開發伺服器。在 ServBay 的『主機』設置中，添加一個新的反向代理：

   • 名字：My first Next.js dev site
   • 域名：servbay-next-test.dev
   • 主機類型：反向代理
   • IP：127.0.0.1
   • 端口：8585

   詳細設置步驟請參考添加Nodejs開發的網站。

3. 存取開發模式

   打開瀏覽器，存取 https://servbay-next-test.dev，即時查看專案。由於 ServBay 支持自定義域名以及免費的 SSL 證書，您將享受到更高的安全性。

建置生產版本

1. 建置生產版本

   當開發完成後，使用以下命令建置生產版本：

   npm run build
   npm run export

   建置完成後，生成的靜態檔將位於 out 目錄中。

2. 設置靜態檔案服務

   使用 ServBay 的『主機』功能，通過靜態檔案服務來存取生產版本。在 ServBay 的『主機』設置中，添加一個新的靜態網站：

   • 名字：My first Next.js production site
   • 域名：servbay-next-test.prod
   • 主機類型：靜態
   • 網站根目錄：/Applications/ServBay/www/servbay-next-app/out

3. 存取生產模式

   打開瀏覽器，存取 https://servbay-next-test.prod，查看建置後的生產版本。通過 ServBay 的自定義域名和免費的 SSL 證書，您的網站將具有更高的安全性和可信度。

通過以上步驟，您成功建立並運行了一個 Next.js 專案，並使用 ServBay 提供的功能來管理和存取您的專案。