這是一個關於如何安裝 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
文件。
現在安裝 Next 和 React:
npm install next react react-dom
您的專案文件夾現在應該有 2 個文件:
package.json
(參考我的教程)package-lock.json
(參考我的教程關於package-lock.json) 以及node_modules
文件夾。
用您喜歡的編輯器打開專案文件夾。我的最愛是 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 的構建命令,我們很快會使用到它們。
現在創建一個 pages
文件夾,並添加一個 index.js
文件。
在此文件中,我們將創建我們的第一個 React 組件。
我們將使用它作為默認的導出:
const Index = () => (
<div>
<h1>首頁</h1>
</div>
)
export default Index
現在使用終端機運行 npm run dev
來啟動 Next.js 開發服務器。
這將使應用程序在本地的 3000 端口上可用。
在瀏覽器中打開 http://localhost:3000 來查看它。