1. 程式人生 > >next.js簡易入門

next.js簡易入門

mkdir init nod 腳本 路由 瀏覽器 webpack 快的 基於

使用next.js,我們能像php一樣,通過js和react來創建可以服務器端渲染的應用。next.js有以下特性:

  • 默認服務器端渲染
  • 自動分割代碼以獲取更快的頁面載入速度
  • 簡易的客戶端路由,基於頁面
  • 開發環境使用webpack支持熱更新
  • 可以由express或者其他nodejs服務端框架來實現服務端代碼
  • 可以自定義babel和webpack設置

輸入以下命令來初始化項目:

mkdir blog
cd blog
npm init -y
npm install --save react react-dom next
mkdir pages

然後打開package.json在script裏加上啟動腳本:

{
  "scripts": {
    "dev": "next"
  }
}

然後運行腳本可以啟動服務:

npm run dev

在瀏覽器打開http://localhost:3000,這時候可以看到404頁面。

因為我們還沒有創建頁面,現在來創建第一個頁面。

next.js簡易入門