next.js建構React服務端渲染 "next": "^8.0.3"

第一步：

建立 檔案夾 next-demo

在此檔案夾目錄下安裝next.js

npm install --save next react react-dom

第二步：

運作如下指令，建立 package.json  檔案

npm init

會問你一些問題，一路回車就可以了

然後将下面腳本添加到 package.json 中:

把 scripts 替換掉

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

第三步：

在項目根目錄下添加檔案夾pages（一定要命名為pages，這是next的強制約定，不然會導緻找不到頁面）

在pages檔案夾下建立index.js檔案，檔案内容：

const index = () => (
  <div>
    Welcome to next.js!
  </div>
)
export default index
           

 第四步：

運作 

npm run dev

 指令并打開   http://localhost:3000/  。

如果你想使用其他端口，可運作 

npm run dev -- -p <設定端口号>

.

效果如下：