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

要安裝 Next.js,您需要先安裝 Node.js

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

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

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

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

mkdir nextjs
cd nextjs

接著,創建您的第一個 Next 專案:

mkdir firstproject
cd firstproject

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

npm init -y

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

npm init 結果

現在安裝 Next 和 React:

npm install next react react-dom

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

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

打開 package.json,它現在的內容如下:

{
 "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 部分替換為:

"scripts": {
 "dev": "next",
 "build": "next build",
 "start": "next start"
}

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

package.json 文件

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

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

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

const Index = () => (
 <div>
 <h1>首頁</h1>
 </div>
)

export default Index

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

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

npm run dev

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

第一個 Next 應用程序畫面