Next.js 是一個知名的 React 框架,幫助您創建快速且現代化的網站,易於使用,並擁有強大的功能,如伺服器端渲染、創建靜態頁面和構建 API。
如果您想在您的 Next.js 項目中開始使用 基於 Ubuntu 的系統,本指南將逐步引導您完成過程。
前置條件
在您開始設置 Next.js 項目之前,您需要在 Linux 系統上安裝幾樣東西,包括:
Node.js
:Next.js 是建立在Node.js
之上的,因此您需要安裝 Node.js。npm
:npm (Node 套件管理器)用於管理您項目的套件和依賴項。
讓我們一起完成 Node.js
和 npm
的安裝過程。
步驟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.js
和 npm
,是時候創建一個新的 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 項目。

一旦命令執行完成,您將擁有一個名為 my-next-app
的新文件夾,裡面包含了一個 Next.js 應用的基本結構。
步驟 3:運行您的 Next.js 項目
創建項目後,進入您的項目文件夾並啟動開發伺服器:
cd my-next-app npm run dev
此命令將啟動 Next.js 開發伺服器。預設情況下,伺服器將運行在 http://localhost:3000
。

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

您可以開始在 app
文件夾中創建新頁面。例如,在 app
目錄中創建一個新的文件 about.js
來創建一個關於頁面。
結論
您已成功在您的 Next.js 專案 上設置一個新的 Ubuntu 機器!現在,您可以通過添加新頁面、組件和功能來開始構建您的網頁應用程式。
Next.js 使構建現代網頁應用程式變得容易,通過本指南的幫助,您已學會如何安裝和設置 Next.js 專案。