React.js 是現今前端最火的應用框架之一，而 Next.js 正是 React.js 領域最優秀的服務端渲染框架之一，基本上，現在所有的前端主流形式，從服務端渲染 APP，靜態站到桌面應用等，Next.js 都能勝任，

不論是國內還是國外，都有不少開發者和企業在使用 Next.js 開發網站，比如：

騰訊新聞移動端門口站騰訊網
大名頂頂的Hulu 視頻站
世界最受歡迎的 React UI 組件庫Material-UI
魅族官網首頁魅族

今天帶來一門完整的 Next.js 框架實戰課程，作者 luffyZh 老師是網易的高級前端開發工程師，手把手帶你逐步掌握 Next.js 框架，最終完成靜態博客+全堆疊動態博客系統的搭建，

最終專案效果：

個人靜態博客系統

全堆疊動態博客系統

如果你是 React.js 開發者并且想學習一個服務端渲染框架，那么本課程是你很好的選擇，

課程分為三個階段：

一：了解服務端渲染并且初步認識 Next.js，學習使用 Next.js 的各種 API 以及內置約束規則，進行簡單的頁面開發；

二：學習用多種方式部署 Next.js 應用，滿足小型個人和大型企業的各種業務場景；

三：從實踐角度出發使用 Next.js 開發兩個應用系統，第一個是靜態個人博客系統，第二個是全堆疊開發包含前后端以及資料庫的動態博客系統，

課程地址：Next.js 輕量級 React 框架實戰

歡迎打開瀏覽器進入學習環境，邊敲代碼邊練習～下面是課程內容：

什么是 Next.js

熟悉一門新的技術，最簡單的途徑就是去它的官網閱讀檔案，官網地址：Next.js，

Next.js 官方對于自身的介紹可以說是毫不謙虛：

The React Framework for Server-Render APP, Static Websites, SEO-Friendly Sites, the DeskTop, Electron, the PWA...

基本上現今前端主流形式，從服務端渲染 APP，靜態站到桌面應用等，Next.js 都能勝任，

Next.js 案例

盡管 Next.js 官網說的天花亂墜，那么實際上呢？有很多開發者在用 Next.js 做專案進行網站開發嗎？來看看有哪些著名的網站使用 Next.js 來進行開發的，

大名頂頂的Hulu 視頻站
世界最受歡迎的 React UI 組件庫Material-UI
騰訊新聞移動端門口站騰訊網
魅族官網首頁魅族

魅族官網只有首頁采用了 Next.js，其他頁面都是另行開發的，應該說它只是為了做 SEO 優化，由此可見 Next.js 在 SSR 以及 SEO 領域確實是有它的長處的，

其實還有更多的例子，具體可見Next.js Showcase，

Next.js 站特征

從上面幾個例子可以看出，很多知名網站都是采用 Next.js 來進行開發的，可能有些人會問了，你說是 Next.js 開發的就是 Next.js 開發的？怎么才能識別出來一個網站是否是使用 Next.js 來進行開發的呢？一般來說可以通過如下幾個特征來判斷一個網站是否是由 Next.js 來進行開發的：

頁面 <body> 標簽內部會有一個的元素 —— 最主要特征，
頁面可能會存在一個的標簽，
頁面內部可能會存在 0 ～多個 <meta next-head>標簽，

就以騰訊門戶來檢驗一下，其他幾個站點大家可以自行驗證：

第一個 Next.js 應用 —— Hello Next.js

上面介紹了這么多，大家應該基本了解了 Next.js 是什么以及 Next.js 的一些優點，學習一門技術，必須要知道它是什么并且了解到為什么要使用它，才能更有興趣的去學習并掌握它，

接下來就通過一個 Next.js 的 Demo 開始 Next.js 開發的入門之旅，來實際動手寫一個任何語言都通用的入門級 Demo —— Hello World，

相關命令大家可以在實驗樓相應環境中執行，

第一步：新建檔案夾 hello-next
第二步：創建 package.json 檔案

在根目錄執行 npm init 命令，之后按照提示一路確認即可，

如果不喜歡復雜步驟，可以直接在 hello-next 目錄下新建 package.json 檔案，然后將下面的內容拷貝進去：

{
  "name": "hello-next",
  "version": "1.0.0",
  "description": "The first demo of Next.js.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": ["next.js"],
  "author": "luffyZh",
  "license": "ISC"
}

第三步：安裝依賴

Next.js 是一個 React.js 框架，所以一般除了安裝 Next.js 之外，還要安裝 React.js 相關核心依賴，

為了避免下載太慢，可以安裝并設定淘寶鏡像，

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org

然后安裝 React.js 相關核心依賴，

// 執行如下命令
npm install --save next react react-dom

安裝完之后，修改 package.json 檔案增加一條啟動命令 "start": "next -p 8080"，它幫助我們啟動 Next.js 的開發環境在 8080 埠進行訪問，現在package.json 代碼如下：

{
  "name": "hello-next",
  "version": "1.0.0",
  "description": "The first demo of Next.js.",
  "main": "index.js",
  "scripts": {
    "start": "next -p 8080",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": ["next.js"],
  "author": "luffyZh",
  "license": "ISC",
  "dependencies": {
    "next": "^9.1.4",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

第四步：添加入口檔案

Next.js 專案啟動需要入口檔案，Next.js 會默認把根目錄的 pages 檔案夾里面的.js檔案決議成路由頁，在 hello-next 目錄下新建 pages/index.js 檔案并寫入如下內容：

什么是路由頁后面課程會詳細介紹，

// pages/index.js

export default () => <h1>Hello Next.js</h1>;

使用 npm start 命令進行啟動，如果你看到控制臺輸出下面這段話就表示啟動成功了：

[ ready ] compiled successfully - ready on http://localhost:8080

點擊右邊工具列 Web服務，會自動新開一個標簽進入瀏覽器，顯示的內容為Hello Next.js：

如果你是在本地創建的檔案，則在瀏覽器訪問地址 localhost:8080 即可，

本節實驗只是為了讓大家理解 Next.js，后續課程無需手動進行專案的初始化搭建，也可以選擇一個更簡單的方式來搭建 Next.js 應用并啟動，即使用命令 npx create-next-app hello-next 進行快速搭建，

大家可以將本環境保存下來，接下來的實驗也會使用到這個環境，本部分代碼可以通過如下命令獲取：

wget https://labfile.oss.aliyuncs.com/courses/1546/code3_hello-next.zip

篇幅有限，后續的課程內容，請進入課程《Next.js 輕量級 React 框架實戰》邊敲代碼邊學習～

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/43506.html

標籤：其他

上一篇：Markdown語法教程

下一篇：0268. Missing Number (E)

前端教程丨手把手教你用 Next.js 搭建個人博客，從入門到吃雞

最終專案效果：

什么是 Next.js

Next.js 案例

Next.js 站特征

第一個 Next.js 應用 —— Hello Next.js