使用 Next.js 構(gòu)建和部署網(wǎng)站比您想象的要容易，最好的部分是什么？它與平臺(tái)無關(guān)，因此無論使用 macOS、Windows 還是 Linux，步驟都保持相同。在本指南中，我將引導(dǎo)您創(chuàng)建一個(gè) Next.js 應(yīng)用程序，在本地進(jìn)行設(shè)置，然后通過幾個(gè)簡單的命令將其部署到 Vercel。

• 1. 設(shè)置您的 Next.js 項(xiàng)目 首先創(chuàng)建一個(gè)新的 Next.js 應(yīng)用程序。打開終端，然后運(yùn)行以下命令：

npx create-next-app@latest my-website
-- Click yes for all dependencies

這將在名為 my-website 的文件夾中創(chuàng)建一個(gè)新的 Next.js 項(xiàng)目。出現(xiàn)提示時(shí)，單擊“是”安裝所有必需的依賴項(xiàng)。

接下來，導(dǎo)航到您的項(xiàng)目文件夾：

 cd my-website

• 2. 確保已安裝節(jié)點(diǎn) 如果您在設(shè)置項(xiàng)目時(shí)遇到任何問題，很可能是由于 Node.js 版本過時(shí)造成的。要解決此問題，您可以安裝最新版本的 Node：

nvm install node --latest-npm

通過檢查 Next.js 安裝指南了解最新版本要求，確保安裝了正確的 Node.js 版本。

• 3. 打開項(xiàng)目文件 設(shè)置項(xiàng)目后，在您的首選代碼編輯器中打開項(xiàng)目文件夾。您應(yīng)該看到類似于下面的文件結(jié)構(gòu)：

請(qǐng)注意，我在這里使用的應(yīng)用程序名稱是portfolio2.0，但您可以隨意為您的項(xiàng)目命名，無論您喜歡什么。如果您想了解有關(guān)這些文件的更多詳細(xì)信息，請(qǐng)查看 Next.js 項(xiàng)目結(jié)構(gòu)文檔。

• 4. 安裝依賴項(xiàng) 接下來，安裝必要的依賴項(xiàng)：

npm install

安裝后，您可以在本地運(yùn)行應(yīng)用程序以查看其運(yùn)行情況。在瀏覽器中訪問 http://localhost:3000，您應(yīng)該會(huì)看到 Next.js 默認(rèn)頁面！
.

• 5.推送代碼到 GitHub

現(xiàn)在您的應(yīng)用程序已在本地設(shè)置，將代碼推送到您的 GitHub 存儲(chǔ)庫。您需要將其部署到 Vercel。

• 6.部署到 Vercel

• 注冊(cè) Vercel：
  如果您沒有 Vercel 帳戶，請(qǐng)?jiān)?vercel.com 上注冊(cè)。您可以使用您的 GitHub 帳戶輕松集成。

• 將 Vercel 連接到 GitHub：
  登錄 Vercel 后，將您的 GitHub 帳戶鏈接到 Vercel 儀表板。

• 導(dǎo)入您的 GitHub 存儲(chǔ)庫：
  單擊 Vercel 儀表板中的“新項(xiàng)目”。
  選擇“導(dǎo)入 Git 存儲(chǔ)庫”并選擇包含您的 Next.js 項(xiàng)目的存儲(chǔ)庫。

• 配置項(xiàng)目：
  Vercel 將自動(dòng)檢測您的項(xiàng)目是使用 Next.js 構(gòu)建的。
  將構(gòu)建命令設(shè)置為下一個(gè)構(gòu)建。
  將輸出目錄設(shè)置為 .next（這通常是自動(dòng)配置的）。
  添加您可能需要的任何環(huán)境變量（可選）。

• 部署您的項(xiàng)目：
  單擊“部署”，Vercel 將開始部署過程。
  Vercel 將克隆您的存儲(chǔ)庫、安裝依賴項(xiàng)、構(gòu)建您的應(yīng)用程序并部署它。

• 等待部署完成：
  Vercel 將提供實(shí)時(shí)部署日志，以便您可以跟進(jìn)該過程。

• 訪問您的實(shí)時(shí)網(wǎng)站：
  部署完成后，您將收到一個(gè)指向您網(wǎng)站的鏈接，該鏈接類似于 your-project-name.vercel.app。就是這樣！您的 Next.js 應(yīng)用現(xiàn)已上線。

快速回顧：任何 Next.js 項(xiàng)目的步驟

準(zhǔn)備您的 Next.js 項(xiàng)目：
確保您的項(xiàng)目位于 GitHub 存儲(chǔ)庫中，其中包含包含必要腳本（下一個(gè)開發(fā)、下一個(gè)構(gòu)建、下一個(gè)啟動(dòng)）的 package.json 文件。

注冊(cè) Vercel：
前往 Vercel 的網(wǎng)站并使用您的 GitHub 帳戶進(jìn)行注冊(cè)。

將 Vercel 連接到 GitHub：
在 Vercel 儀表板中鏈接您的 GitHub 帳戶。

導(dǎo)入您的 GitHub 存儲(chǔ)庫：
在 Vercel 儀表板中，單擊“新建項(xiàng)目”并選擇您的 GitHub 存儲(chǔ)庫。

配置您的項(xiàng)目：
Vercel 會(huì)自動(dòng)檢測 Next.js 項(xiàng)目并配置大多數(shù)設(shè)置。如果需要，您可以微調(diào)設(shè)置。

部署：
單擊“部署”并讓 Vercel 處理剩下的事情。它將自動(dòng)構(gòu)建和部署您的應(yīng)用程序。

等待部署：
您可以實(shí)時(shí)監(jiān)控部署日志。

檢查您的實(shí)時(shí)網(wǎng)站：
部署完成后，Vercel 將為您提供一個(gè)用于訪問您的站點(diǎn)的 URL。

以上是使用下一個(gè) JS 創(chuàng)建一個(gè)網(wǎng)站并使用 Vercel 進(jìn)行部署。的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！