程式設計

開發伺服器與部署術語

了解本機開發伺服器、網路 URL、連接埠、建置、部署、警告與常見 Web 錯誤。

42 個項目

本機開發

localhost

http://localhost:3001

意思

一個主機名，指向運行瀏覽器或命令的同一台計算機。

用途

在檢查網站時，如果是在與開發伺服器相同的 Mac 或 PC 上進行，請使用 localhost。

注意

手機或平板電腦具有自己的本地主機，因此它無法使用 Mac 的本地主機地址。

範例

http://localhost:3001

請求範例

在 localhost 上開啟本地網站，並檢查新的參考頁面。

本機開發

127.0.0.1

http://127.0.0.1:3001

意思

一個迴路 IP 地址，也指向同一台本地計算機。

用途

它通常可以與 localhost 互換，用於同裝置上的測試。

範例

http://127.0.0.1:3001

請求範例

如果 `localhost` 無法正確解析，請嘗試 `127.0.0.1`。

本機開發

開發伺服器

Dev server

npm run dev

意思

一個用於開發的伺服器，具有快速重建和僅限開發的功能。

用途

運用它來在構建或部署網站之前，預覽更改。

注意

開發伺服器的行為並不總是與部署的生產環境行為完全相同。

範例

npm run dev

請求範例

啟動開發伺服器，以便我可以在我的 iPhone 上檢查頁面。

本機開發

端口

Port

http://localhost:3001

意思

一個用於識別哪個伺服器進程應該接收來自機器的連線的數字。

用途

如果一個伺服器使用 3001 端口，則另一個伺服器必須使用不同的端口，例如 3002。

範例

http://localhost:3001

請求範例

如果 3001 端口已被使用，請在另一個端口上啟動開發伺服器。

本機開發

本機 URL

Local URL

Local: http://localhost:3001

意思

從與開發伺服器相同的設備使用的位址。

用途

對於開發機器上的桌面瀏覽器檢查，請使用 Local URL。

範例

Local: http://localhost:3001

請求範例

啟動開發伺服器後，請告訴我本機 URL。

網路存取

網路 URL

Network URL

Network: http://172.30.1.55:3001

意思

一個其他設備在同一網絡上使用的地址，用於訪問開發服務器。

用途

在從 iPhone、iPad 或同一 Wi-Fi 上的其他電腦檢查網站時使用。

注意

开发服务器必须监听可从网络访问的主机，例如 0.0.0.0。

範例

Network: http://172.30.1.55:3001

請求範例

使用網路 URL 啟動開發伺服器，以便我可以在我的 iPad 上進行測試。

網路存取

IP 位址

IP address

172.30.1.55

意思

一個用於識別網路中裝置的數字地址。

用途

一個 LAN IP 地址允許同一 Wi-Fi 網絡上的其他設備訪問您的開發伺服器。

注意

本機網路的 IP 位址在 Wi-Fi 或路由器條件變更時可能會發生變化。

範例

172.30.1.55

請求範例

在為設備測試新增允許的 Dev Origins 時，請使用當前 LAN IP。

網路存取

主機

Host

--hostname 0.0.0.0

意思

伺服器啟動時，用於監聽請求的位址。

用途

將綁定到 0.0.0.0 允許開發伺服器從網路上的其他設備訪問。

範例

--hostname 0.0.0.0

請求範例

使用主機名稱為 0.0.0.0 的開發伺服器，用於手機測試。

網路存取

相同的網路

Same network

Mac 和 iPhone 連接到相同的 Wi-Fi

意思

連接到相同本地網路的設備，通常是相同的 Wi-Fi 路由器。

用途

手機只有在網路設定允許的情況下才能連接到 Mac 的開發伺服器。

範例

Mac 和 iPhone 連接到相同的 Wi-Fi

請求範例

在調試網站之前，檢查 iPhone 和 Mac 是否在同一網路中。

Next.js 行為

allowedDevOrigins

allowedDevOrigins: ['172.30.1.55']

意思

一個 Next.js 開發設置，允許特定的來源訪問開發資源。

用途

在使用 LAN IP 從手機或平板電腦測試 Next 開發伺服器時，可能需要它。

注意

這是開發環境設定。部署的靜態網站不使用相同的開發資源存取路徑。

範例

allowedDevOrigins: ['172.30.1.55']

請求範例

將我的當前 LAN IP 地址添加到 `allowedDevOrigins` 中，用於開發測試。

網路存取

跨來源

Cross-origin

Blocked cross-origin request

意思

一個跨不同來源的請求，其中方案、主機或埠不同。

用途

開發工具可能預設會阻止對敏感的開發資源進行跨來源存取。

範例

Blocked cross-origin request

請求範例

說明這個跨域警告是否會影響生產環境的部署。

Next.js 行為

HMR

/_next/webpack-hmr

意思

熱模塊替換 (Hot Module Replacement) 在開發期間無需完全重新加載即可更新瀏覽器。

用途

如果 HMR 開發資源被阻止，頁面可能已加載，但開發中的互動更新或腳本可能會出現異常。

注意

HMR 僅用於開發，不包含在最終的靜態導出中。

範例

/_next/webpack-hmr

請求範例

檢查 iPhone 問題是否是由於封鎖的 HMR 開發資源引起的。

Next.js 行為

Turbopack

Next.js 16.2.5 (Turbopack)

意思

一個 bundler，Next.js 用於開發和構建流程。

用途

您可能會在開發伺服器或構建輸出中看到它的名稱。

範例

Next.js 16.2.5 (Turbopack)

請求範例

總結 Turbopack 的輸出，並告訴我構建是否成功。

Next.js 行為

App Router

src/app/[locale]/reference/page.tsx

意思

基於應用程式目錄的 Next.js 路由系統。

用途

在一個資料夾下新增一個 page.tsx 檔案，會建立一個路徑。

範例

src/app/[locale]/reference/page.tsx

請求範例

使用 App Router 文件夾結構添加新的參考頁面。

Next.js 行為

generateStaticParams

generateStaticParams()

意思

一個 Next.js 函數，用於宣告哪些動態路由應該在構建時生成。

用途

區域頁面使用它來建立 /en、/ko、/ja 以及其他語言路徑。

範例

generateStaticParams()

請求範例

確保新的參考頁面具有適用於所有區域的 generateStaticParams。

建置與輸出

構建

Build

npm run build

意思

編譯並準備網站以進行生產或靜態輸出的過程。

用途

在部署之前執行構建，以檢測 TypeScript、路由和靜態生成問題。

範例

npm run build

請求範例

執行建置程序，並確認新的路由是否已產生。

建置與輸出

Lint

npm run lint

意思

一種靜態程式碼檢查，用於檢測程式碼風格、正確性和框架規則問題。

用途

Lint 是一種在構建或提交之前的快速檢查。

範例

npm run lint

請求範例

在編輯參考頁面後，執行 lint 工具。

建置與輸出

靜態匯出

Static export

output: "export"

意思

一個構建輸出，其中頁面以靜態檔案的形式生成，而不是需要一個正在運行的伺服器。

用途

靜態匯出適用於將網站作為預構建的 HTML、CSS 和 JavaScript 文件進行託管。

注意

某些僅在伺服器上運行的功能無法與靜態匯出一起使用。

範例

output: "export"

請求範例

保持新頁面與靜態匯出相容。

建置與輸出

SSG

● (SSG) 以靜態 HTML 預渲染

意思

靜態網站生成在構建時創建頁面。

用途

針對每個地區，在構建過程中會生成參考頁面，這些頁面使用 generateStaticParams。

範例

● (SSG) 以靜態 HTML 預渲染

請求範例

確認參考路徑在構建輸出中顯示為 SSG。

建置與輸出

預渲染

Prerender

prerendered as static content

意思

在使用者請求之前渲染頁面，通常在構建過程中。

用途

預渲染的頁面加載速度快，因為 HTML 已經存在。

範例

prerendered as static content

請求範例

檢查所有地區的頁面是否已成功預渲染。

建置與輸出

捆綁

Bundle

靜態 JS 資源包。

意思

結合程式碼和依賴項的編譯檔案，用於瀏覽器。

用途

大型捆綁包可能會影響載入速度，並且在網站增長時需要密切關注。

範例

靜態 JS 資源包。

請求範例

避免僅為了簡單的參考頁面而引入大型函式庫。

部署

Deploy

部署靜態輸出

意思

發布已構建的網站，以便用戶可以在網上訪問它。

用途

在進行本地檢查、程式碼檢查和構建通過後，才會進行部署。

範例

部署靜態輸出

請求範例

不要立即部署；只需準備頁面並運行構建。

部署

製作

Production

production deployment

意思

用戶訪問的實際部署環境。

用途

製作的測試應與本地開發伺服器不同，因為開發伺服器具有本地開發才有的功能。

範例

production deployment

請求範例

說明這個警告是否會影響生產環境或僅影響開發環境。

部署

託管

Hosting

靜態網站託管服務商

意思

儲存和提供已部署網站檔案的服務或伺服器。

用途

當不需要伺服器邏輯時，靜態匯出可以由靜態主機提供服務。

範例

靜態網站託管服務商

請求範例

確保輸出在靜態主機環境中有效。

部署

領域

Domain

example.com

意思

用户键入以访问网站的人类可读地址。

用途

一個網域名稱，通過 DNS 指向部署的託管位置。

範例

example.com

請求範例

不要將 localhost 硬編碼到應該在生產環境網域上運作的連結中。

部署

DNS

記錄 / CNAME 記錄

意思

將網域名稱映射到伺服器或主機目標的系統。

用途

為了使自訂網域訪問已部署的網站，必須正確配置 DNS。

範例

記錄 / CNAME 記錄

請求範例

說明這個問題是 DNS 問題還是應用程式構建問題。

部署

快取

Cache

clear browser cache

意思

儲存文件的副本或用於加快頁面載入速度的回應。

用途

部署後，舊的快取文件可能會導致瀏覽器在一段時間內顯示舊版本。

範例

clear browser cache

請求範例

檢查舊頁面是否仍然顯示，因為快取問題。

執行環境

Node.js

node --version

意思

一種 JavaScript 運行時環境，用於運行開發工具、構建腳本和伺服器。

用途

Next.js 的開發和構建命令在 Node.js 上運行。

範例

node --version

請求範例

請告訴我，這個警告訊息是來自 Node.js、Next.js，還是我的應用程式程式碼。

執行環境

npm

npm run build

意思

一個常用的 JavaScript 專案中的套件管理器和腳本執行器。

用途

package.json 定義了 npm 可以執行的腳本，例如 dev、lint 和 build。

範例

npm run build

請求範例

執行 `npm build` 指令，並總結結果。

執行環境

package.json

"scripts": { "dev": "next dev -p 3001" }

意思

一個定義腳本、依賴項和套件元數據的專案檔案。

用途

檢查 package.json，以了解專案期望您執行的命令。

範例

"scripts": { "dev": "next dev -p 3001" }

請求範例

在決定要執行的開發命令之前，檢查 package.json。

執行環境

環境變數

Environment variable

NEXT_PUBLIC_SITE_URL=https://example.com

意思

一個供應給應用程序或構建環境的外部源代碼的值。

用途

環境變數用於網站 URL、API 金鑰和特定於部署的設置。

注意

密碼不應透過公開的客戶端變數暴露。

範例

NEXT_PUBLIC_SITE_URL=https://example.com

請求範例

如果已經存在環境變數，則不要硬編碼生產站點的 URL。

錯誤與警告

404

404 Not Found

意思

一個錯誤，表示請求的頁面或文件未找到。

用途

當路由被刪除、重命名或在靜態輸出中未生成時，可能會發生這種情況。

範例

404 Not Found

請求範例

檢查舊的 "programming-basics" URL 現在是否返回 404 錯誤，因為它已被移除。

錯誤與警告

500

500 Internal Server Error

意思

一個錯誤，表示服務器在處理請求時發生故障。

用途

在開發過程中，終端或瀏覽器覆蓋通常會顯示源代碼中的錯誤。

範例

500 Internal Server Error

請求範例

如果出現 500 錯誤，請檢查終端錯誤並識別導致錯誤的文件。

錯誤與警告

Module not found

Module not found: Can't resolve '@/lib/programming'

意思

一個錯誤，表示導入指向無法找到的文件或包。

用途

它通常發生在移動、刪除或重新命名檔案，但未更新匯入語句的情況下。

範例

Module not found: Can't resolve '@/lib/programming'

請求範例

查找並更新所有仍然指向已刪除檔案的匯入。

錯誤與警告

未找到匯出項目。

Export not found

Export programmingBasicsCopy doesn't exist

意思

一個錯誤，表示文件存在，但請求的命名導出文件未提供。

用途

當數據對象被重命名，但導入仍然使用舊名稱時，可能會發生這種情況。

範例

Export programmingBasicsCopy doesn't exist

請求範例

將舊的匯出名稱在所有地方替換為新的名稱。

錯誤與警告

EADDRINUSE

listen EADDRINUSE: address already in use 0.0.0.0:3001

意思

一個錯誤，表示另一個進程正在使用請求的主機和端口。

用途

如果您有意要替換它，請使用另一個埠或停止現有的伺服器。

範例

listen EADDRINUSE: address already in use 0.0.0.0:3001

請求範例

如果出現 EADDRINUSE，請告訴我哪個端口正在使用，並使用不同的端口。

錯誤與警告

DeprecationWarning

[DEP0205] DeprecationWarning: module.register() is deprecated

意思

一個警告，表明 API 目前仍然有效，但可能被刪除或更改。

用途

警告訊息應該被注意，但它們不總是會導致構建失敗的錯誤。

範例

[DEP0205] DeprecationWarning: module.register() is deprecated

請求範例

請告訴我，這個 DeprecationWarning 是否無害，或者是否需要修改程式碼。

錯誤與警告

補水

Hydration

Hydration failed because the server rendered HTML didn't match

意思

客户端 JavaScript 連接到伺服器渲染的 HTML 的過程。

用途

當伺服器和客戶端渲染不同的初始內容時，會發生不匹配錯誤。

範例

Hydration failed because the server rendered HTML didn't match

請求範例

如果補水失敗，請檢查客戶端上哪個組件渲染方式不同。

指令

npm run dev

npm run dev

意思

一個專案腳本，用於啟動本地開發伺服器。

用途

在編輯頁面和本地檢查變更時，請使用它。

範例

npm run dev

請求範例

執行 `npm run dev`，並提供本機和網路 URL。

指令

npm run build

npm run build

意思

一個專案腳本，用於建立生產版本或靜態匯出。

用途

在變更後執行它，以確保應用程式可以成功生成。

範例

npm run build

請求範例

執行 `npm run build`，並總結任何警告或錯誤。

指令

npm run lint

npm run lint

意思

一個專案腳本，用於執行 lint 檢查。

用途

在編譯之前執行它，以便快速發現許多程式碼問題。

範例

npm run lint

請求範例

在建立網站之前，執行 lint 工具。

指令

curl

curl -I http://localhost:3001/ko

意思

一個命令行工具，用於發送 HTTP 請求並檢查響應。

用途

curl can quickly check whether a local or deployed page responds with 200, 404, or another status.

範例

curl -I http://localhost:3001/ko

請求範例

使用 curl 檢查新的參考路由是否返回 200。