實驗環境

軟體版本

操作系統： Fedora35

// on Fedora35
nodejs-16.14.0-2.fc35.x86_64
npm-8.3.1-1.16.14.0.2.fc35.x86_64
yarnpkg-1.22.10-3.fc35.noarch

軟體包說明

nodejs: nodejs 語言支持, 提供node命令

npm: node package manager, 提供npm, npx命令

• npm類似於Python裡面的Pip
• npx 可以直接執行npm包的命令

yarnpkg: 提供yarn命令，功能跟npm命令基本一樣。很多時候可以互換

Quick Start

從0開始創建一個項目

npx create-next-app my-static-nextjs-app
// 用create-next-app的npm包提供的命令創建一個樣板項目，項目放在本地目錄my-static-nextjs-app
// 在這個過程中會自動做進到這個本地目錄裡面執行:
// 1. 安裝下載項目需要的依賴包（類似於yarn isntall)，預設下載路徑./node_modules
// 2. git init初始化為repo 
// 註意.gitignore文件的內容, ./node_modules就是不計入的

關於 **create-next-app**的更多信息，可以參考:
https://www.npmjs.com/package/create-next-app
https://nextjs.org/docs/api-reference/create-next-app

啟動開發模式

$ yarn dev // or: npm run dev 
// 這裡的dev命令其實都是package.json裡面定義的

可以通過http://ip:3000 或者 http://localhost:3000 訪問

構建並啟動開發模式

在package.json文件裡面定義好了build和start命令

"scripts": {
....
    "build": "next build",
    "start": "next start",
.....

直接運行即可

$ yarn build
// will generate .next folder, which is ignored by git
$ yarn start
// start the server at 0.0.0.0:3000 and localhost:3000

可以通過http://ip:3000 或者 http://localhost:3000 訪問