指南：建立及部署 Next.js 應用程式

開發 Next.js 應用程式只是第一步，後續的部署作業至關重要。這項程序包含將應用程式提供給網際網路中的使用者。有效的部署策略是關鍵所在，可以確保應用程式的效能、擴充性和可靠性。這份指南會逐步說明如何順利部署 Next.js 應用程式。

12:22

在 Cloud Run 執行 Next.js 應用程式

什麼是 Next.js 框架？

Next.js 是一種 React 框架，在 React 的基礎上新增多項功能，讓開發人員更輕鬆地建立正式環境網站，並自動進行最佳化調整。

簡單來說，Next.js 可協助您以 React 建構現代化應用程式。這種框架支援伺服器，並提供最佳化調整過的映像檔和元件，可以快速產生結果，而且僅須傳輸小型檔案。

React (預設) 與 Next.js 之間的差異

這兩者看起來可能很相似，也都會執行 JavaScript，不過功能和用途大相逕庭。

特徵	React (預設)	Next.js
SEO 適合程度	可能相當困難	適合 SEO
初始載入效能	稍慢	較快
擷取資料	需要手動導入	內建 getServerSideProps 和 getStaticProps
轉送	使用轉送程式庫 (例如 React Router)	透過檔案系統轉送
複雜度	更簡單	已預先定義多項設定

特徵

React (預設)

Next.js

SEO 適合程度

可能相當困難

適合 SEO

初始載入效能

稍慢

較快

擷取資料

需要手動導入

內建 getServerSideProps 和 getStaticProps

轉送

使用轉送程式庫 (例如 React Router)

透過檔案系統轉送

複雜度

更簡單

已預先定義多項設定

如何建立 Next.js 應用程式

許多 React 應用程式的建立步驟大致相同，但我們建議使用 Next.js 框架。這個架構能管理許多元件，讓您更有效率地擴充應用程式並將 React 網站的 SEO 最佳化，滿足您的高效能和進階需求。

步驟 1：啟動專案

務必使用終端機產生範本，確保所有需要的詳細資料和程式碼都已備妥。

使用終端機：

npx create-next-app@latest

接下來，您還需完成一些設定。

步驟 2：定義或修改專案檔案

根據指示掌握必要和所需資訊 (伺服器或用戶端資訊)，以及其位置。有了這些資訊，才能建構應用程式。

「這是發揮優異效能和速度的關鍵。」

步驟 3：確保新資料已就位

再次確認您已備有伺服器和/或用戶端所需元件的相關資訊。

步驟 4：重新啟動伺服器

現在更新程式碼，讓版面配置更美觀。

如需相關資訊，請參閱這份說明文件。

步驟 5：呈現新的程式碼

變更完畢後，即可完成設定。您現在可以看到新的程式碼。

建立 Next.js 應用程式時的重要考量

網站速度是提高搜尋引擎最佳化效率的關鍵。JavaScript 本身會拖慢顯示速度，進而降低搜尋效能。不過，使用 Next.js 可減輕這個問題。因此，請優先確保網站載入速度快，且資料管理效率高。謹慎使用測試資料，並遵守隱私權和存取權規範，才能提供最佳產品，同時妥善保護安全。

用戶端轉送

大部分 React 應用程式會使用 react-router-dom 等程式庫來處理導覽作業。由於這是在瀏覽器中運作，必須設定託管伺服器才能支援。一般做法是將所有網頁要求導向根層級 index.html 檔案，然後讓 React Router 接管並顯示正確的元件。

環境變數

應用程式在開發和正式環境可能須採用不同的設定，例如 API 金鑰或資料庫端點。請務必使用環境變數 (例如 .env 檔案) 管理這些資訊，以免曝露原始碼中的敏感資訊。

後端 API 通訊

React 前端會構成 UI，但通常從後端 API 取得動態資料。如果 API 託管於不同網域，部署 React 應用程式時，務必確保應用程式知道正式環境 API 的正確網址，並設為可處理跨源資源共享 (CORS)。

如何在 Cloud Run 部署 Next.js 應用程式

如果想使用容器式工作流程，確保 React 應用程式能維持最高的一致性和可攜性，Cloud Run 是部署這類應用程式的理想選擇。請參閱快速入門導覽課程，瞭解如何在 Cloud Run 建構及部署 Next.js React 應用程式。

步驟 1：確保應用程式設定無誤

為了順利轉移應用程式，首先請確認已導入資料和轉移設定的所有相關詳細資料。

步驟 2：後續建構步驟 (建立 Docker 映像檔)

按照這些步驟，確保每個階段都包含專案所需的所有詳細資訊。

# 只在需要時安裝依附元件

FROM node:16-alpine AS deps

# 檢查 https://github.com/nodejs/docker-node/tree/b4117f933ba60658f2812f36b8

117330a1dc25ab#alpine

RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm ci

# 如果使用 turbo，請一併取消註解以下區段：

# COPY turbo.json ./

# COPY .gitignore ./

# 新增環境變數

ENV NEXT_TELEMETRY_DISABLED 1

# 重新建構掛鉤來檢查要加入及排除的項目

RUN npm run build

###############

#### 第 2 階段：正式環境映像檔 ###

###############

FROM node:16-alpine AS runner

WORKDIR /app

# NEXT_PUBLIC_... env variables during build time.

ENV NODE_ENV production

# 如果使用自訂設定檔，則只要複製 next.config.js 即可

COPY --from=builder /app/next.config.js ./

COPY --from=builder /app/public ./public

COPY --from=builder /app/.next ./.next

COPY --from=builder /app/node_modules ./node_modules

COPY --from=builder /app/package.json ./package.json

# 詳情請參閱 https://cloud.google.com/run/docs

/configuring/traffic

ENV PORT 8080

EXPOSE 8080

CMD ["npm", "start"]

# 只在需要時安裝依附元件

FROM node:16-alpine AS deps

# 檢查 https://github.com/nodejs/docker-node/tree/b4117f933ba60658f2812f36b8

117330a1dc25ab#alpine

RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm ci

# 如果使用 turbo，請一併取消註解以下區段：

# COPY turbo.json ./

# COPY .gitignore ./

# 新增環境變數

ENV NEXT_TELEMETRY_DISABLED 1

# 重新建構掛鉤來檢查要加入及排除的項目

RUN npm run build

###############

#### 第 2 階段：正式環境映像檔 ###

###############

FROM node:16-alpine AS runner

WORKDIR /app

# NEXT_PUBLIC_... env variables during build time.

ENV NODE_ENV production

# 如果使用自訂設定檔，則只要複製 next.config.js 即可

COPY --from=builder /app/next.config.js ./

COPY --from=builder /app/public ./public

COPY --from=builder /app/.next ./.next

COPY --from=builder /app/node_modules ./node_modules

COPY --from=builder /app/package.json ./package.json

# 詳情請參閱 https://cloud.google.com/run/docs

/configuring/traffic

ENV PORT 8080

EXPOSE 8080

CMD ["npm", "start"]

接下來要完成部署。請使用 Cloud Build 等平台，並連結設定檔。

步驟 3：運用雲端技術，最終發布應用程式

最後使用 Cloud Run 發布應用程式，並注意應用程式是否可用且正確。請務必參照主要工具和程式碼，確保運作順暢。

如何在 Firebase 部署 Next.js 應用程式

Firebase 也是很合適的選擇，只需要以下簡單步驟就能完成部署。想在 Firebase 整合 Next.js 嗎？請按照完整說明文件操作。

步驟 1：完成公開伺服器設定

按照映像檔或文件要求來完成設定 (必須使用 SSL)，確保所有作業安全無虞。

步驟 2：設定及安裝 (CMD)

按照 Firebase CLI 安裝及使用說明操作。

npm install -g firebase-tools

步驟 3：連結及設定專案

執行「firebase init hosting」指令，按照提示操作。

確認指令列中的網址已重寫，且正確無誤。

回答「否」，確保所有內容部署完成後不會發生問題。

透過 Google Cloud 解決業務難題

新客戶可以獲得價值 $300 美元的免費抵免額，盡情試用各項 Google Cloud 功能。

測試最佳做法

請使用本機主機程式碼，執行本機測試。

驗證 CLI 後，將程式碼推送至以下存放區：

gcloud auth configure-docker

現在完成以下事項：

輸入指令：docker tag [IMAGE_NAME] gcr.io/[PROJECT-ID]/[IMAGE_NAME]
上傳並推送 gcloud 容器映像檔

如需完整的 Cloud Run 一般開發提示清單，請參閱這份說明文件。

展開下一步行動

運用價值 $300 美元的免費抵免額和超過 20 項一律免費的產品，開始在 Google Cloud 中建構產品與服務。

需要入門協助嗎？
聯絡銷售人員
與值得信賴的夥伴合作
尋找合作夥伴
繼續瀏覽
查看所有產品

指南：建立及部署 Next.js 應用程式

什麼是 Next.js 框架？

React (預設) 與 Next.js 之間的差異

如何建立 Next.js 應用程式

步驟 1：啟動專案

步驟 2：定義或修改專案檔案

步驟 3：確保新資料已就位

步驟 4：重新啟動伺服器

步驟 5：呈現新的程式碼

建立 Next.js 應用程式時的重要考量

用戶端轉送

環境變數

後端 API 通訊

如何在 Cloud Run 部署 Next.js 應用程式

步驟 1：確保應用程式設定無誤

步驟 2：後續建構步驟 (建立 Docker 映像檔)

步驟 3：運用雲端技術，最終發布應用程式

如何在 Firebase 部署 Next.js 應用程式

步驟 1：完成公開伺服器設定

步驟 2：設定及安裝 (CMD)

步驟 3：連結及設定專案

透過 Google Cloud 解決業務難題

測試最佳做法

相關產品和解決方案

展開下一步行動

需要入門協助嗎？

與值得信賴的夥伴合作

繼續瀏覽