如何在 Ubuntu 上安裝和設置新的 Next.js 項目

Next.js 是一個知名的 React 框架,幫助您創建快速且現代化的網站,易於使用,並擁有強大的功能,如伺服器端渲染、創建靜態頁面和構建 API。

如果您想在您的 Next.js 項目中開始使用 基於 Ubuntu 的系統,本指南將逐步引導您完成過程。

前置條件

在您開始設置 Next.js 項目之前,您需要在 Linux 系統上安裝幾樣東西,包括:

  • Node.jsNext.js 是建立在 Node.js 之上的,因此您需要安裝 Node.js
  • npmnpmNode 套件管理器)用於管理您項目的套件和依賴項。

讓我們一起完成 Node.jsnpm 的安裝過程。

步驟1:在 Linux 中安裝 Node.js 和 NPM

在安裝任何新軟體之前,最好先更新您的套件列表,以確保您正在安裝最新版本的軟體。

sudo apt update

接下來,您可以安裝 Node.js(同時安裝 npm),最好安裝標記為 LTS長期支持)的 Node.js 版本,因為這是最穩定且最廣泛使用的版本。

sudo apt install nodejs

安裝完成後,通過檢查其版本來驗證 Node.js 是否正確安裝:

node -v
npm -v

現在您的系統上已經安裝了 Node.js 和 npm。

步驟 2:安裝和設置 Next.js 項目

現在您已經安裝了 Node.jsnpm,是時候創建一個新的 Next.js 項目了。安裝 Next.js 的最簡單方法是使用 create-next-app,這是由 Next.js 團隊提供的官方包。

sudo npm install -g create-next-app

現在 create-next-app 已經安裝,您可以創建一個新的 Next.js 項目。

npx create-next-app@latest my-next-app

在這裡,my-next-app 是您的項目文件夾的名稱。您可以將其替換為任何您喜歡的名稱。npx 命令將下載並運行 create-next-app 包,並為您設置一個新的 Next.js 項目。

Create a New Next.js Project

一旦命令執行完成,您將擁有一個名為 my-next-app 的新文件夾,裡面包含了一個 Next.js 應用的基本結構。

步驟 3:運行您的 Next.js 項目

創建項目後,進入您的項目文件夾並啟動開發伺服器:

cd my-next-app
npm run dev

此命令將啟動 Next.js 開發伺服器。預設情況下,伺服器將運行在 http://localhost:3000

Run Next.js Project

打開您的瀏覽器並訪問該網址,您應該會看到默認的 Next.js 歡迎頁面。

Default Next.js Page

您可以開始在 app 文件夾中創建新頁面。例如,在 app 目錄中創建一個新的文件 about.js 來創建一個關於頁面。

結論

您已成功在您的 Next.js 專案 上設置一個新的 Ubuntu 機器!現在,您可以通過添加新頁面、組件和功能來開始構建您的網頁應用程式。

Next.js 使構建現代網頁應用程式變得容易,通過本指南的幫助,您已學會如何安裝和設置 Next.js 專案。

Source:
https://www.tecmint.com/install-next-js-ubuntu/