/

如何安裝 Next.js

如何安裝 Next.js

這是一個關於如何安裝 Next.js 的逐步指南。

要安裝 Next.js，您需要先安裝 Node.js。

請確保您已經安裝了最新版本的 Node.js。在終端機中輸入 node -v，並將其與 https://nodejs.org/ 上列出的最新 LTS 版本進行比較。

安裝完 Node.js 後，您將可以在命令行中使用 npm 命令。

如果在這個階段遇到任何問題，我建議您參考以下我為您撰寫的教程：

現在，您已將 Node 更新為最新版本並且擁有 npm，請在任何您喜歡的位置創建一個空文件夾，例如在您的主文件夾中，然後進入該文件夾：

1
2
mkdir nextjs
cd nextjs

接著，創建您的第一個 Next 專案：

1
2
mkdir firstproject
cd firstproject

現在使用 npm 命令將其初始化為 Node 專案：

1
npm init -y

-y 選項告訴 npm 使用項目的默認設置，填充一個示例的 package.json 文件。

npm init 結果

現在安裝 Next 和 React：

1
npm install next react react-dom

您的專案文件夾現在應該有 2 個文件：

用您喜歡的編輯器打開專案文件夾。我的最愛是 VS Code。如果您已經安裝了它，您可以在終端機中輸入 code . 來打開當前文件夾（如果該命令對您無效，請參考這篇文檔）。

打開 package.json，它現在的內容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
 "name": "mysite",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "dependencies": {
 "next": "^9.1.2",
 "react": "^16.11.0",
 "react-dom": "^16.11.0"
 }
}

將 scripts 部分替換為：

1
2
3
4
5
"scripts": {
 "dev": "next",
 "build": "next build",
 "start": "next start"
}

這樣添加了 Next.js 的構建命令，我們很快會使用到它們。

package.json 文件

現在創建一個 pages 文件夾，並添加一個 index.js 文件。

在此文件中，我們將創建我們的第一個 React 組件。

我們將使用它作為默認的導出：

1
2
3
4
5
6
7
const Index = () => (
 <div>
 <h1>首頁</h1>
 </div>
)

export default Index

現在使用終端機運行 npm run dev 來啟動 Next.js 開發服務器。

這將使應用程序在本地的 3000 端口上可用。

npm run dev

在瀏覽器中打開 http://localhost:3000 來查看它。

第一個 Next 應用程序畫面

tags: [“Next.js”, “installation”, “Node.js”, “React”]